如何基于父路由匹配子路由？Angular单页应用路由问题

你的问题核心在于：父路由/:outer/:inner已经匹配了URL的全部路径段，子路由只能匹配剩余的空路径，所以你设置的outer1/inner1这类子路由路径永远无法触发。要基于父路由的参数匹配子模块，可通过以下步骤实现：

1. 修改MainComponent所在模块的路由配置 #

将子路由简化为仅匹配空路径，通过loadChildren的工厂函数读取父路由参数，动态加载对应模块：

const routes = [
  {
    path: '',
    outlet: 'main',
    component: MainComponent,
    children: [
      {
        path: '',
        outlet: 'content',
        // 工厂函数接收路由快照，读取父路由的参数
        loadChildren: (route: ActivatedRouteSnapshot) => {
          const { outer, inner } = route.parent?.params || {};
          
          // 根据参数匹配对应的模块
          if (outer === 'outer1' && inner === 'inner1') {
            return import('@myapp/outer1/inner1').then(module => module.Outer1Inner1Module);
          } else if (outer === 'outer2' && inner === 'inner1') {
            return import('@myapp/outer2/inner1').then(module => module.Outer2Inner1Module);
          }
          
          // 默认加载Outer2Inner1Module
          return import('@myapp/outer2/inner1').then(module => module.Outer2Inner1Module);
        }
      }
    ]
  }
];

2. 保留app-routing.module.ts的原有配置 #

无需修改根路由，保持如下配置即可：

{path: ':outer/:inner', component: MainComponent},

3. 确保MainComponent模板包含对应路由出口 #

确认模板中有命名路由出口：

<!-- MainComponent模板 -->
<router-outlet name="content"></router-outlet>

原理说明 #

Angular的子路由匹配逻辑是基于父路由匹配后剩余的路径段，你的父路由/:outer/:inner已经消耗了全部路径，剩余路径为空，因此子路由只能匹配空路径。通过loadChildren的工厂函数，我们可以直接读取父路由的参数，动态决定加载哪个模块，绕开子路由路径匹配的限制。

内容的提问来源于stack exchange，提问作者F-H