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