仅当使用[routerLink]时，才从导航组件中的链接路由到命名插座失败 [英] Routing to a named outlet from links in a navigation component fails only when using [routerLink]

问题描述

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

My application receives an error when I try to route to a named outlet using this link in html:

<a [routerLink]=.../> 

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

But the same route works using this.router.navigate from a ts handler function.

以下StackBlitz显示了此问题: StackBlitzNavErrorExample

The following StackBlitz shows the issue:StackBlitzNavErrorExample

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

Click on "CarLink" which shows a simple navigation page, then notice how the button "Change" works but the link "GI Link" does not. But the routing looks the same for me. I want to use [routerLink]= so I can also use routerLinkActive="myClass" to hightlight the link selected.

即使没有更改主电源插座的路线，我也会收到以下错误消息:

I receive the following error even though I am not changing the route for the primary outlet:

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

推荐答案

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

Since you have configured routes in root level, you have to move your named router outlet to 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>

ForkedExample

这篇关于仅当使用[routerLink]时，才从导航组件中的链接路由到命名插座失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！