如何在 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 配置来创建包。问题是我没有在 Webpack 中使用这个加载器：

angular-router-loader

As described, angular-router-loader 必须添加到 typescript loader.

如何在 angular 模块中定义层级路由

How to define hierarchy routing in angular modules

javascript

angular-routing

angular