如何在Angular参数化父路由中实现动态懒加载子模块？

1. 创建模块映射表 #

首先，把所有需要动态加载的模块与对应id做映射，消除重复代码：

// 可放在路由配置文件或单独常量文件中
const moduleMap: Record<string, () => Promise<{ [key: string]: Type<any> }>> = {
  'FIRST': () => import('./components/.../first.module').then(m => m.FirstModule),
  'SECOND': () => import('./components/.../second.module').then(m => m.SecondModule),
  // 依次添加第3到100个模块的映射
};

2. 修改参数化路由配置 #

调整路由结构，利用loadChildren的路由快照参数获取:id，动态加载对应模块：

const routes: Routes = [
  {
    path: ':id',
    children: [
      { path: '', component: OutletComponent },
      {
        path: '',
        component: OutletComponent,
        outlet: 'sidebar',
        // 通过路由快照获取父路由的:id参数，动态匹配模块
        loadChildren: (route: ActivatedRouteSnapshot) => {
          const moduleId = route.parent?.params['id'];
          if (!moduleId || !moduleMap[moduleId]) {
            // 处理无效id的情况，比如抛出错误或重定向到404页面
            throw new Error(`未找到id为${moduleId}的对应模块`);
          }
          return moduleMap[moduleId]();
        }
      }
    ]
  }
];

3. 保留子模块的路由配置 #

各子模块（如FirstModule、SecondModule）的路由配置保持原有结构即可：

// FirstModule的路由示例
const routes: Routes = [{ path: '', component: FirstComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FirstModule {}

问题解决说明 #

• 解决loadChildren仅调用一次的问题：Angular会根据loadChildren返回的模块实例缓存，当不同:id对应不同模块时，每次导航都会加载对应模块，不会复用之前的缓存（因为返回的是不同模块类型）。
• 获取父路由参数：loadChildren函数接收ActivatedRouteSnapshot参数，通过route.parent?.params['id']可直接拿到父路由的:id值，从而动态匹配映射表中的模块。

额外注意事项 #

• 确保moduleMap中的id与导航时的:id完全一致（区分大小写）；
• 对于无效id，可添加前置路由守卫拦截，或在loadChildren中返回默认模块/错误组件；
• 若模块数量过多，可通过脚本自动生成moduleMap，减少手动维护成本。

内容的提问来源于stack exchange，提问作者G.D.