Угловая маршрутизация: невозможно перенаправить

Question

Это может быть очень распространенная angular проблема маршрутизации, но я не могу заставить ее работать.Я не уверен, ясно ли я понимаю все концепции даже после прохождения угловых документов.Вот чего я хочу достичь и что я попробовал:

У меня есть приложение для входа.Когда пользователь нажимает кнопку продолжить в форме входа, я хочу, чтобы приложение перенаправляло на новую страницу / приложение.Для этого:

1. Сначала я попытался добавить RouterModule в мой список @NgModule imports в файле app.module.ts.

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

Принимая предложение от @YousefKhan, я попробовал решение, которое он опубликовал.Это решило мою начальную проблему.Первоначально проблема заключалась в том, как я определил свои маршруты и как я установил файл app.component.html, который должен содержать только компонент <router-outlet></router-outlet>.Я переместил все остальные шаблоны из app.component.html в соответствующие компоненты и добавил Routes в свой app.module.ts Итак, после внесения изменений:

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>

Это решило проблему маршрутизации и помогло мне лучше понять концепцию.Для справки ознакомьтесь с этой статьей об угловой маршрутизации здесь.

Другая проблема, с которой я столкнулся, как я уже упоминал в комментарии, заключалась в том, что контекст this внутри обработчика subscribe былне привязан к 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'); } 
  );

}

Надеюсь, это поможет.

Answer 2

Вы никуда не движетесь в случае успеха.Введите Router в constructor как:

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);
    }
  }