如何在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
          }
        ]
      }
    ]
  }
];

但是我的問題是，它僅使用此[routerLink]="['mark-route']"標記組件。 在具有此[routerLink]="['james-route']" james組件上，它僅在URI顯示正確的路徑https://my-website/john-route/mark-route/james-route ，但不顯示將組件加載到頁面中。 這是怎么回事，如何解決此問題，或者什么是最佳解決方案？

Answer 1

您的MarkComponent還需要在其中有一個router-outlet 。

要使用子路徑，您的父組件必須具有標記部分

<router-outlet></router-outlet>

這使您的子路徑可以放置在父組件中。 必須對具有子組件的所有組件執行相同的操作。

有關更多信息，請參見Angular中的“路由和導航”。