angular - 如何在 Angular 5 中嵌套超过 2 级的子路由？

Question

我在 Angular 5 中有这个示例路线。这 3 个组件被导入到这个模块中。组件mark在john组件文件夹下生成，james组件在mark组件文件夹下生成。

我想通过如下路径加载 james 组件:https://my-website/john-route/mark-route/james-route 所以我在模块中创建了这条路线文件。

  const routes: Routes = [
  {
    path: 'john-route',
    component: JohnComponent,
    children: [
      {
        path: 'mark-route',
        component: MarkComponent,
        children: [
          {
            path: 'james-route',
            component: JamesComponent
          }
        ]
      }
    ]
  }
];

但我的问题是，它只加载带有此 [routerLink]="['mark-route']" 的标记组件。在带有此 [routerLink]="['james-route']" 的 james 组件上，它只显示正确的路径 https://my-website/john-route/mark-route/james-route 在 URI 中，但不会在页面中加载组件。这里发生了什么，如何解决这个问题或者最好的解决方案是什么？

Answer 1

您的 MarkComponent 还需要在其中有一个 router-outlet。

要使用子路由，你的父组件必须有一个标记部分

<router-outlet></router-outlet>

这可以让您的子路由放置在父组件中。必须对具有子组件的所有组件执行相同的操作。

有关更多信息，请参阅 Routing & Navigation in Angular