Angular 路由：无法进行重定向

Question

这可能是一个非常常见的 angular 路由问题，但我似乎无法让它工作。即使阅读了 angular 文档，我也不确定我是否清楚地理解了所有概念。这是我想要实现的目标和我尝试过的目标：

我有一个登录应用程序。当用户在登录表单中单击继续时，我希望应用程序重定向到新的 page/app。为此：

我首先尝试将 RouterModule 添加到 app.module.ts 文件中的 @NgModule imports 列表。

import { RouterModule, Routes } from '@angular/router';

// Routes
const routes: Routes = [
  {path: "", component: InvestigatorLoginComponent},
  {path: 'invdashboard', component: InvDashboardComponent}
];
//...
@NgModule({
// ...
imports: [
// ...
RouterModule.forRoot(
  routes, { enableTracing: true} // <= debugging
),
// ...
})
export class AppModule {}

已将 <router-outlet></router-outlet> 添加到 <inv-dashboard> 组件：

app.component.html

<div id='login-app-wrapper'>
  <nav-top></nav-top>
  <investigator-login></investigator-login> 
</div>

inv-dashboard.component.html

<router-outlet></router-outlet>
<p>
  inv-dashboard works!
</p>

inv-dashboard.component.ts

import { RouterOutlet } from '@angular/router'; 

@Component({
  selector: 'inv-dashboard',
  templateUrl: './inv-dashboard.component.html',
  styleUrls: ['./inv-dashboard.component.css']
})
export class InvDashboardComponent implements OnInit { // ... }

登录组件： investigator-login.component.html

 <form class='inv-login' [formGroup]="invLoginForm" (ngSubmit)="onSubmit(invLoginForm.value)">

 <mat-form-field class='inv-login-full-width-input'>

 <input matInput placeholder="Username" formControlName="fcUsername" value="" maxlength="30">
 </mat-form-field>

 <mat-form-field class='inv-login-full-width-input'>
 <input matInput placeholder="Password" formControlName="fcPassword" value="" maxlength="25">  
 </mat-form-field>
 <div class='prcd-btn-container'>
    <button mat-button color='primary' type='submit'>Proceed</button>
 </div>
</form>

investigator-login.component.ts

`onSubmit(f: any): void {
    this.authenticator.postContent(f)
      .subscribe(
        this.handleLoginResponse,
        err => { throw new Error('failed'); } 
      );
  }
  handleLoginResponse(res: IResponseSuccess) {
    if(res.status === 200) {
      // success 
      console.log(res.template);
    }
    else {
      console.error('Server error ' + res.status);
    }
  }`

填写完表格后，我点击继续，没有任何反应。堆栈轨道显示没有重定向。我是否需要向表单中的 proceed 按钮处理程序添加任何重定向代码？我真的不确定还要添加什么。

谢谢

Answer 1

您没有导航到任何地方就成功了。在 constructor 中注入 Router，例如：

constructor(private router: Router) { }

然后导航成功

handleLoginResponse(res: IResponseSuccess) {
    if(res.status === 200) {
      // success 
      console.log(res.template);
      this.router.navigate(['/invdashboard']);
    }
    else {
      console.error('Server error ' + res.status);
    }
  }

Answer 2

根据@YousefKhan 的建议，我尝试了他发布的解决方案。它解决了我最初的问题。最初，问题在于我如何定义我的路线以及我如何设置 app.component.html 文件，该文件应该只包含一个 <router-outlet></router-outlet> 组件。我已将所有其他模板从 app.component.html 移至相关组件，并在我的 app.module.ts 中添加了 Routes 因此，进行更改后：

app.module.ts Router

// Routes
const routes: Routes = [
  {path: "", redirectTo: "login", pathMatch: "full"},
  {path: "login", component: InvestigatorLoginComponent},
  {path: "dashboard", component: InvDashboardComponent}
];

app.component.html

<router-outlet></router-outlet>

这解决了路由问题，帮助我更好地理解了这个概念。作为参考，请查看这篇文章 on angular routing here.

正如我在评论中提到的，我面临的另一个问题是 subscribe 处理程序中的 this 上下文未绑定到 InvestigatorLoginComponent instance。简单的解决方案是使用 arrow function。但是，由于我想让我的处理程序分开，所以我使用 bind 将 this 上下文添加到处理程序。

investigator-login.component.ts

onSubmit(f: any): void {
this.authenticator.postContent(f)
  .subscribe(
    this.handleLoginResponse.bind(this),
    err => { throw new Error('failed'); } 
  );

}

希望对您有所帮助。

Angular 路由：无法进行重定向

Angular Routing: Not able to make redirect

angular

angular-router