如何在角度模块中定义层次结构路由答案

【问题标题】：How to define hierarchy routing in angular modules如何在角度模块中定义层次结构路由
【发布时间】：2017-09-05 08:15:23
【问题描述】：

如您所知，要在 Angular 中创建层次结构路由，我们定义如下列表：

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

另外我们在组件模板的每一层都使用router-outlet作为容器来渲染对应的组件。

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

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

【问题讨论】：

如果一个空路径的路由没有子路由也没有重定向，它应该有pathMatch: 'full'。您的 CrisisCenterHomeComponent 始终匹配，而 CrisisDetailComponent 从不匹配。
问题是加载其他模块中定义的孩子。
我知道，我没有将其添加为答案。您仍然应该知道path: '' 需要一些特殊注意事项。如果未添加 pathMatch: 'full'，则始终匹配，然后继续搜索其子路由，而不是兄弟路由。
模块中的子路由通常使用angular.io/guide/router#lazy-loading-route-configuration
您只想进行逻辑分隔吗？还是功能性的？因为所有非惰性模块及其路由都合并到一个模块中。阅读Avoiding common confusions with modules in Angular

标签： javascript angular angular-routing

【解决方案1】：

我在一个项目中使用惰性加载来定义层次结构路由，其中所有组件都被分离到各个模块，但它不起作用。我自己编写了 Webpack 配置来创建捆绑包。问题是我没有在 Webpack 中使用这个加载器：

angular-router-loader

As described，angular-router-loader 必须添加到 typescript loader。

【讨论】：