角度路由：无法进行重定向

Question

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

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

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

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 {}

1. 将<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 { // ... }

1. 登录组件： 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'); } 
  );

}

希望对你有帮助。