如何更改 Angular 中的辅助路由？

Question

这是我的app.routing.module.ts文件

  { path: 'admin', component: AdminComponent,
    children: [
      { path: 'driverregister',outlet: 'adminnavbar', component: RegisterdriverComponent},
      { path: 'viewdrivers',outlet: 'adminnavbar', component: ViewdriversComponent},
      { path: 'editdriverdetails',outlet: 'adminnavbar', component: EditdriverdetailsComponent},
    ]
  },

单击以下路由器链接后

[routerLink]="[{outlets: {'adminnavbar': 'driverregister'}}]"

我的网址显示为

http://localhost:4200/admin/(adminnavbar:viewdrivers)

现在我想将我的网址更改为

http://localhost:4200/admin/(adminnavbar:editdriverdetails)

我尝试使用

[routerLink]="[{outlets: {'adminnavbar': 'editdriverdetails'}}]"

但它没有奏效。它在控制台中显示以下错误。

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin' Error: Cannot match any routes. URL Segment: 'admin'

如何解决这个问题？

Answer 1

其中的信息[routerLink]是一系列命令。默认情况下，routerLink 是相对于您当前的路由的。如果你已经开启了http://localhost:4200/admin/(adminnavbar:viewdrivers)，那么当你使用 时[routerLink]="[{outlets: {'adminnavbar': 'editdriverdetails'}}]"，Angular 将使用当前路由作为基本路由。你想要的是回到 的基本路线admin。

它应该看起来像这样[routerLink]="['/admin', {outlets: {'adminnavbar': 'editdriverdetails'}}]"。这说，

1. 首先去/admin路线
2. 然后去(adminnavbar:viewdrivers)专卖店