Angular - 将两个不同的路径路由到同一延迟加载子模块中的不同组件

Question

我有两条路 /a 和 /b

在我的父模块中，我将它们路由到同一个子模块：

// app-routing.moudle.ts
  {
    path: 'a',
    loadChildren: () => import('./m-child/m-child.module').then(m => m.ChildModule),
  },
  {
    path: 'b',
    loadChildren: () => import('./m-child/m-child.module').then(m => m.ChildModule),
  },

在子模块中，我想将 a 和 b 路由到不同的组件，即

// m-child-routing.module.ts
  {
    path: 'a',
    component: AComponent
  },
  {
    path: 'b',
    component: BComponent
  },

我不想重新定义路线，即我不想要 /a/a 或 /b/b。我想让它们保持简单一级：/a 和 /b，但仍然通过相同的延迟加载模块加载。

有可能实现这个目标吗？谢谢你。

Answer 1

通过路由加载模块时，您导入并加载模块中的所有子组件，这本身就与您此处需要的延迟加载概念相矛盾，如果您只需要为所述路由加载“一个”组件

host/a

您可以直接在 app-routing.module.ts 中添加

component: AComponent

； BComponent 也类似。如果您仅从应用程序路由加载 a 或 b 组件，而不加载在

path:''

下的子模块中加载的主组件（其中 a 和 b 属于其中），则此解决方案是可行的