javascript - 如何在 Angular 模块中定义层次结构路由

Question

正如您所知，要在 Angular 中创建层次结构路由，我们定义一个如下所示的列表:

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

我们还在每一级组件的模板中使用router-outlet作为容器来渲染相应的组件。

假设每个级别的路由都在各个模块中定义，并且所有模块都在父模块中导入。

如何定义上述路由层次结构并在每个模块中使用多个路由器导出？

Answer 1

我在一个项目中使用延迟加载来定义层次结构路由，其中​​所有组件都分为单独的模块，但它不起作用。我自己编写了 Webpack 配置来创建 bundle 。问题是我没有在 Webpack 中使用这个加载器:

angular-router-loader

As described ，必须将 angular-router-loader 添加到 typescript 加载器中。