Angular 4中使用根路由器出口的嵌套路由

Question

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

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

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

当我导航到“parent/child”路由时，这个设置可以正常工作，路由器出口会加载ChildComponent。

然而，当我导航到“parent/child/grandchild”路由时，GrandchildComponent没有加载。

这似乎可以使用子组件中的第二个路由器出口来解决，但是有没有办法让GrandchildComponent在根路由器出口上加载，而不需要第二个路由器出口呢？

- Krishna Chaitanya

---

如果只有一个路由器出口，嵌套路由的目的是什么？ - DeborahK

你需要在顶层定义路由。[{path: 'parent/child/grandchild', component: GrandchildComponent}]，但正如其他人所说，此时它并不是真正的孙子组件，因此可能被错误标记。 - LLai

@DeborahK 的目的是使用 loadChildren 来惰性加载模块。 - Krishna Chaitanya

在子级别上？那么孙子的目的呢？ - DeborahK

Answer 1

我会说不。如果您想在根出口加载孙子，则它不是孙子，而是祖父！当您有嵌套路由时，需要有嵌套的出口。

- user4676340