Угловой роутер не активирует ngoninit

Question

У меня есть угловое приложение, которое предполагает создание графического интерфейса для пользователей, чтобы войти в систему. У меня есть компонент входа с помощью следующего HTML-кода

<mat-card>
  <mat-form-field class="full-width">
    <input matInput placeholder="Enter your Username" [(ngModel)]="username">
  </mat-form-field>

  <mat-form-field class="full-width">
    <input matInput placeholder="Enter Password" [(ngModel)]="password">
  </mat-form-field>

  <button mat-raised-button (click)="logIn()">Log In</button>
</mat-card>

Это код для компонента

@Hub({hubName: 'DALHub'})
export class LogInComponent implements OnInit {
  private hubWrapper: HubWrapper;
  username: String = '';
  password: String = '';

  constructor(private router: Router, private hub: HubService) {
    // This is signalr init process
    this.hubWrapper = this.hub.register(this);
    this.hub.connect({url: 'http://localhost:10476/signalr'});
  }

  ngOnInit() {
  }

  logIn() {
    this.hubWrapper.invoke('LogIn', this.username, this.password);
  }

  @HubSubscription()
  LogOK() {
    this.hubWrapper.unregister();
    this.router.navigate(['logged', this.username, this.password]);
  }
}

Как вы можете видеть, я использую сервер сигнализатора и пакет ngx-signalr для клиента.

когда пользователь нажимает кнопку "Войти", активируется функция входа в систему, которая вызывает сервер, чтобы проверить правильность имени пользователя и пароля. Если пароль и имя пользователя указаны правильно, сервер вызывает функцию LogOK на клиенте, которая предполагает перенаправить приложение на другой компонент.

Это конфигурация роутера

const routes: Routes = [
  {path: '', component: LogInComponent},
  {path: 'logged/:username/:password', component: UserComponent}
]; 

(Обратите внимание, что розетка маршрутизатора находится на html-странице приложения)

Это вид журнала когда я вхожу, я ожидаю получить следующую страницу Однако, когда я вхожу, я получаю следующую страницу Как вы можете видеть, страница входа все еще здесь, а страница пользователя выглядит странно, я проверил и увидел, что функция ngOnInit в UserComponent не была активирована, и я думаю, что это проблема. Вы знаете, как я могу это исправить?

Answer 1

Похоже, что маршрут маршрутизации неверен, поэтому измените маршрут в login component как это

const url = `${'logged/' + this.username + '/' + this.password}`;
this.router.navigate([url]);

Answer 2

Конфигурация маршрута

const routes: Routes = [
  {path: '', component: LogInComponent},
  {path: 'logged/:username/:password', component: UserComponent}
]; 

Маршрутная навигация / активация

this.router.navigate(['/logged', this.username, this.password]);

Похоже, вам не хватает косой черты? Обратите внимание на косую черту в начале пути.

Из документов:

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

Маршрутизатор сопоставляет такие абсолютные пути с маршрутами, начиная с верхней части конфигурации маршрута.

Кроме того, вы можете включить трассировку маршрута, чтобы лучше видеть, что может быть не так с вашими маршрутами:

RouterModule.forRoot([routes], { enableTracing: true })