时间戳

首页 > 解决方案 > 仅在使用 [routerLink] 时，从导航组件中的链接路由到命名出口失败

angular - 仅在使用 [routerLink] 时，从导航组件中的链接路由到命名出口失败

问题描述

当我尝试使用 html 中的此链接路由到命名插座时，我的应用程序收到错误：

<a [routerLink]=.../>

但是使用 ts 处理程序函数中的 this.router.navigate 可以使用相同的路由。

以下 StackBlitz 显示了该问题：StackBlitzNavErrorExample

单击显示简单导航页面的“CarLink”，然后注意“更改”按钮如何工作，但“GI Link”链接没有。但是路由对我来说看起来一样。我想使用 [routerLink]= 所以我也可以使用 routerLinkActive="myClass" 来突出显示选定的链接。

即使我没有更改主插座的路线，我也会收到以下错误：

ERROR
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'car/9'
Error: Cannot match any routes. URL Segment: 'car/9'

标签： angularangular-ui-router

解决方案

由于您已在根级别配置路由，因此您必须将命名的路由器出口移动到 app.component.html

app.module.ts

const routes: Routes = [
      { path: 'car/:id', component: CarComponent},
      { path: 'gi/:otherId', component: GIComponent, outlet: 'center'}
]

app.component.html

  <a [routerLink]="['car', '9']" > Car Link </a>
    <router-outlet></router-outlet>   
    <router-outlet name="center"></router-outlet>

分叉示例

推荐阅读