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

Question

我有这些路线

/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 名称。

标签： angularlazy-loading

Answer 1

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