子出口中的角子路线答案

【问题标题】：Angular child route in sub outlet子出口中的角子路线
【发布时间】：2020-08-16 21:50:55
【问题描述】：

在我的 TestComponent 中，我有一个导航栏，其中包含多个组件的链接，这些组件要显示在 TestComponent 中的子路由器出口中，但它会引发此错误。

core.js:6237 ERROR 错误：未捕获（承诺中）：错误：无法匹配任何路线。 URL 段：'dashboard/test/id'

const routes: Routes = [
      {
        path: '',
        redirectTo: 'dashboard/test',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        children: [
          {
            path: 'test',
            component: TestComponent,
            children: [
              {
                path: '',
                redirectTo: 'id',
                pathMatch: 'full'
              },
              {
                path: 'id',
                component: IdComponent,
                outlet: 'sub'
              }
            ]
          }
        ]
      }
    ];

【问题讨论】：

你能分享你的 routerLinks html 代码吗？
你没有任何带有leo路径的路由器配置？
<li routerLink="/dashboard/test/id">Run ID</li>
routerLink 命名路由器的配置将采用不同的语法。我认为您犯了一些语法错误，您可以创建 stackblitz 吗？
现在没关系。如果我在浏览器中更改 url，它就不能正常工作。

标签： javascript angular

【解决方案1】：

你的 routerLink 应该是

[routerLink]="['/dashboard/test', {outlets: { sub: ['id'] } }]"

【讨论】：