Angular 8 无法匹配嵌套路由答案

【问题标题】：Angular 8 cannot match nested routeAngular 8 无法匹配嵌套路由
【发布时间】：2020-01-15 15:17:15
【问题描述】：

我正在使用 Angular 8，但在尝试使嵌套路由正常工作时遇到了麻烦。我得到的错误是：

core.js:6014 ERROR 错误：未捕获（承诺中）：错误：无法匹配任何路由。 URL 段：“产品/颜色”

我有 AppComponent HTML，它可以毫无问题地加载我的子组件“产品”。

app.component.html

<router-outlet></router-outlet>

在我的“产品”组件中，我想包含一个名为“颜色”的嵌套组件。

colors.component.html

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

我添加了一个新的嵌套路由，如下所示：

app-routing.module.ts

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

有什么建议吗？

【问题讨论】：

出于某种原因您需要指定的插座吗？那里是否还有一个主要出口迫使您使用命名出口？
我认为你需要像/product/colours 这样的东西，否则它只会匹配/colours。
我在同一个视图中有一个主要出口。如果我必须在没有插座的情况下定义多条路线，那么我将不得不为每个“产品/[嵌套]”视图复制模板代码。
不清楚您所说的“视图”是什么意思……父母有一个主要出口，孩子也有一个很好，这很常见。如果您在同一个 COMPONENT 中有多个插座，则仅需要命名插座。您可能应该发布更多此代码以及您实际尝试完成的内容，因为看起来您正在采取有问题的方法。命名出口在 Angular IMO 中是一个错误，应该避免
@bryan60 完全同意，命名的网点令人困惑，老实说，我从未使用过它们。当一个简单的组件加载就可以了时，它只会使事情变得复杂。

标签： angular

【解决方案1】：

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

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

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

您可以在angular docs中找到更多关于二级路线导航的信息

【讨论】：

这行得通！有没有办法自定义 URL 使其不显示/product/(nested:colours)？
没有默认方法可以做到这一点，但我可以看到一种潜在的方法。如果这回答了您的问题，请您批准并投票：)

【解决方案2】：

我不知道你还有什么可能阻止你这样做，但从这里提供的代码来看，你似乎不需要使用命名的插座，所以你可以这样做颜色：

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

并定义没有出口的路线：

  {
    path: 'colours',
    component: ColoursComponent
  }

【讨论】：