Angular-与同一路径的子路径关联的两个不同的延迟加载模块

时间:2019-03-22 13:17:20

标签: angular lazy-loading

我有这些路线

/items/:id
/items
/items/:id/edit
... etc

我想将/ items /:id / edit映射到的组件放在一个与其他路由映射到的组件不同的延迟加载模块中。

我想这样做是因为与/ items /:id / edit关联的组件非常繁重,并且调用了许多其他模块不需要的子模块。

理想情况下,我想执行以下配置(不幸的是,该配置无法正常工作):

@NgModule({
  imports: [
    RouterModule.forRoot([
      { // If the route matches "items/:id/edit", then look inside this module
        path: 'items/:id/edit',
        loadChildren: './items_editor/items_editor.module#ItemsEditorModule',
      },
      { // Otherwise look inside this other one
        path: 'items',
        loadChildren: './items/items.module#ItemsModule',
      },
    ]);
  ],
});

此刻,由于我找不到实现目标的方法,因此我将“ items /:id / edit”的路径重命名为“ items_editor /:id”:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'items',
        loadChildren: './items/items.module#ItemsModule',
      },
      {
        path: 'items-editor',
        loadChildren: './items_editor/items_editor.module#ItemsEditorModule',
      },
    ]);
  ],
});

但是,我不喜欢此更改,因为它们不是REST名称。

1 个答案:

答案 0 :(得分:2)

在这种情况下,唯一的选择是在路由配置中使用UrlMatcher,并且在此方法的帮助下,不将items /:id / edit路径委托给ItemsModule,请参见https://angular.io/api/router/UrlMatcher的详细信息