Angular 4中带有根路由器出口的嵌套路由答案

【问题标题】：Nested Routes with Root Router Outlet in Angular 4Angular 4中带有根路由器出口的嵌套路由
【发布时间】：2017-11-22 14:25:09
【问题描述】：

我在 Angular 4 应用程序中使用嵌套路由。它们的结构如下：

routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
           path: 'grandchild',
           component: GrandchildComponent
        ]
      }
    ]
  }
]

我在 app.component.html 中定义了一个路由器出口。

当我导航到“父/子”路由时，此设置工作正常，路由器出口加载 ChildComponent。

但是，当我导航到“父/子/孙子”路线时，GrandchildComponent 不会加载。

这似乎确实适用于子组件中的辅助路由器插座，但有什么方法可以让 GrandchildComponent 加载到根路由器插座上，而不需要辅助路由器？

【问题讨论】：

如果你只有一个路由器出口，嵌套路由的目的是什么？
您必须在顶层定义路线。 [{path: 'parent/child/grandchild', component: GrandchildComponent}]，但正如其他人所说，它目前还不是真正的孙子，所以它可能被贴错标签。
@DeborahK 目的是使用loadChildren来懒加载模块。
在儿童级别？那么孙子的目的呢？

标签： angular nested-routes angular4-router

【解决方案1】：

我会说不。

如果你想将孙子加载到根出口，那么它不是孙子，而是祖父！当你有嵌套的路线时，你需要有嵌套的出口。

【讨论】：