angular - 角度 8 页面未重定向(点击卡在同一页面上)
问题描述
我的应用程序没有重定向到其他页面,网址更改但页面内容保持不变。提前致谢。
- app.component.html
<section id="login-page">
<div class="container-fluid">
<div class="row d-flex align-content-center vh-100">
<div class="col-7 left-sec align-self-center">
<div class="content-sec">
<h2 class="mb-5">Sign In to continue</h2>
<img class="mt-3" src="../assets/images/login-v2.72cd8a26.svg">
</div>
</div>
<div class="col-5 right-sec align-self-center">
<form>
<div class="form-group">
<input type="email" class="form-control" id="empid" aria-describedby="emailHelp">
</div>
<div class="form-group">
<input type="password" class="form-control" id="empPass">
</div>
<a routerLink="/dash">Dashboard</a>
<button type="submit" class="btn p-cta" routerLink="dash" routerLinkActive="active">Submit</button>
</form>
</div>
</div>
</div>
</section>
<router-outlet></router-outlet>
- app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmpDashComponent } from './_hx/emp-dash/emp-dash.component';
import { EmpProfileComponent } from './_hx/emp-profile/emp-profile.component';
import { LeftNavComponent } from './_hx/left-nav/left-nav.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@NgModule({
declarations: [
AppComponent,
EmpDashComponent,
EmpProfileComponent,
LeftNavComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- 应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { EmpDashComponent } from './_hx/emp-dash/emp-dash.component';
import { EmpProfileComponent } from './_hx/emp-profile/emp-profile.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: AppComponent },
{ path: 'dash', component: EmpDashComponent },
{ path: 'profile', component: EmpProfileComponent },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我不确定我在哪里做错了,编译后没有错误ui,点击登录按钮url改变但页面内容没有改变。请让我知道,我在哪里做错了。
解决方案
不要在提交按钮上使用 routerLink:相反,在您设置提交逻辑的 component.ts 中,使用 Angular 路由器:
if(isLoginOk(this.loginData)){
this.router.navigateByUrl(`/dash`);
}
无论如何,这是行不通的,因为写的是“dash”而不是“/dash”:
<button type="submit" class="btn p-cta" routerLink="dash" routerLinkActive="active">Submit</button>
<!-- change to -->
<button type="submit" class="btn p-cta" routerLink="/dash" routerLinkActive="active">Submit</button>
推荐阅读
- wordpress - 用于 woocommerce/bulk 方法的品牌过滤器小部件为多个产品添加属性
- r - R 是否有办法说“做 n 次”而不必编写带有冗余变量的 for 循环?
- java - Google Drive 的读取超时问题
- git - 如何永久删除 git 中的提交(附件)?
- javascript - 从 HMTL 表创建 Javascript 对象
- c# - UWP Kinect V2 保持帧速率恒定 (30fps)
- mockito - 模拟存储库返回 null - Springboot JUnit Mockito
- angular - 如何解析对象文字只能指定已知属性,并且“部分”类型中不存在“xxxx”