Angular命名路由出口clientView懒加载子路由空白无法渲染问题求解

• 命名出口路由层级配置错误：clientView是定义在clientComponent内部的路由出口，对应需要挂载到该出口的路由必须作为clientComponent所在路由的子路由配置，原配置将二者设为平级路由，Angular无法找到对应的出口位置挂载组件，导致页面空白。
• 路由匹配规则不匹配：原配置中clientView出口的路由路径为family，需要匹配URL中的路径段/family，但跳转后生成的路由格式为client/(clientView:family)，无对应路径段，无法触发路由匹配。

1. 调整client模块路由配置 #

将命名出口路由移入clientComponent的children数组中，同时新增主出口的family层级路由，用于匹配更深层的add/edit路径：

const clientRoutes: Route[] = [
  {
    path: '',
    component: clientComponent,
    children: [
      // 内部命名出口路由放在子路由列表中
      {
        path: 'family',
        outlet: 'clientView',
        loadChildren: () => 
          import('../family/family.module').then(m => m.FamilyModule)
      }
    ]
  },
  // 主出口的family层级路由，匹配深层子路径
  {
    path: 'family',
    children: [
      {
        path: 'add',
        loadChildren: () => 
          import('../family/family-editors.module').then(m => m.FamilyEditorsModule)
      },
      {
        path: 'edit/:id',
        loadChildren: () => 
          import('../family/family-editors.module').then(m => m.FamilyEditorsModule)
      }
    ]
  }
];

2. 简化family模块路由配置 #

父路由已经指定了挂载出口为clientView，子模块的默认空路径路由不需要重复指定出口，同时删除子模块中原有的主出口路由配置（已迁移到client模块平级路由）：

const familyMemberManagementRoutes: Route[] = [
  {
    path: '',
    component: FamilyComponent
  }
];

3. 调整路由跳转写法 #

直接匹配子路由中的命名出口规则即可，不需要额外配置主出口内容：

<a mat-button [routerLink]="['.', {outlets: { 'clientView': ['family']}}]">Family members</a>

<div class="w-100">
  <router-outlet name="clientView"></router-outlet>
</div>

配置完成后即可符合需求：

• 路径为/client/(clientView:family)时，FamilyComponent会正常渲染在clientView命名出口中
• 路径为/client/family/add、/client/family/edit/:id时，编辑器模块内容会渲染在顶层主出口中，替换整个clientComponent

如果需要隐藏URL中的括号格式，可以额外添加重定向规则，将/client/family重定向到/client/(clientView:family)即可。

内容的提问来源于stack exchange，提问作者manneJan89