时间戳

首页 > 解决方案 > Angular 8 cannot match nested route

angular - Angular 8 cannot match nested route

问题描述

I'm using Angular 8 and am having trouble trying to get a nested route to work. The error I get is:

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'product/colours'

I have the AppComponent HTML which loads my child component 'product' without issue.

app.component.html

<router-outlet></router-outlet>

Inside my 'product' component I want to include a nested component called 'colours'.

colours.component.html

<a routerLinkActive="is-active" routerLink="colours">Colours</a>
<router-outlet name="nested"></router-outlet>

I added a new nested route like this:

app-routing.module.ts

  {
    path: 'product',
    component: ProductComponent,
    children: [
      {
        path: 'colours',
        component: ColoursComponent,
        outlet: 'nested'
      }
    ]
  }

Any advice?

标签： angular

解决方案

使用该RouterLink属性时，默认情况下它路由到主路由器。您的主路由器上没有product/colours路由。

你必须让RouterLink属性知道你想使用哪个插座（如果不是主要的）

<a 
  routerLinkActive="is-active" 
  [routerLink]="[{ outlets: { nested: ['colours'] } }]"
>
  Colours
</a>

您可以在Angular 文档中找到有关辅助路线导航的更多信息

推荐阅读