如何在 Angular 5 中嵌套 2 级以上的子路由？答案

【问题标题】：How to nest more than 2 levels of children routes in Angular 5?如何在 Angular 5 中嵌套 2 级以上的子路由？
【发布时间】：2018-09-16 05:03:48
【问题描述】：

我有这个角度为 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']" 的詹姆斯组件上，它仅在URI 中显示正确的路径https://my-website/john-route/mark-route/james-route，但不会在页面中加载该组件。这里发生了什么，如何解决这个问题或最好的解决方案是什么？

【问题讨论】：

标签： angular routes angular5 router

【解决方案1】：

您的MarkComponent 还需要在其中包含router-outlet。

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

<router-outlet></router-outlet>

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

更多信息请见Routing & Navigation in Angular

【讨论】：

你能展示一下它是怎么做的吗？我还是 Angular 5 的新手。谢谢
我使用了这个解决方案，但我还需要替换页面。不仅通过显示/添加james component，而且通过james component 完全替换mark component。我需要像*ngIf 这样的东西吗？
如果你想完全取代他们，也许你需要他们成为兄弟姐妹，而不是父母/孩子？
哦。好吧，我明白了。 mark 路径将完全被 james 替换。谢谢。