角度路由器不会激活koninit

Question

我有一个角度应用程序，假设为用户创建一个GUI登录。我有一个登录组件与以下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软件包。

一旦用户点击“登录”按钮，就会激活logIn功能，该功能会调用服务器来检查用户名和密码是否正确。如果密码和用户名正确，则服务器在客户端中调用函数LogOK，该函数假设将应用程序路由到其他组件。

这是路由器配置

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

（注意路由器插座位于app html页面中）

这是登录视图当我登录时我希望得到以下页面但是当我登录时我得到以下页面正如你所看到的登录页面仍然在这里，用户页面看起来很奇怪，我检查了我看到UserComponent的ngOnInit函数没有被激活，我认为这是问题所在。你知道我怎么解决它吗？

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