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

Answer 1

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

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

Angular - Two different lazy loaded modules associated to subpaths of the same path

lazy-loading