如何在Angular 5中嵌套2个以上的子级路线？

Question

我在角度5中有此示例路由。这3个组件已导入到此模块中。组件标记在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
          }
        ]
      }
    ]
  }
];

但是我的问题是，它只能使用this标记组件[routerLink]="['mark-route']"。并且在具有this的james组件上[routerLink]="['james-route']"，它仅在中显示正确的路径https://my-website/john-route/mark-route/james-route，URI但不会在页面中加载该组件。这是怎么回事，如何解决此问题，或者什么是最佳解决方案？

Answer 1

您MarkComponent还需要router-outlet在其中添加内容。

要使用子路径，您的父组件必须具有标记部分

<router-outlet></router-outlet>

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

有关更多信息，请参见Angular中的“路由和导航”。