使用空路径时Angular组件无法加载到默认路由出口，指定名称则正常

问题根源 #

你遇到的问题核心是Angular路由在同一出口下的路由匹配优先级和多出口路由的独立性：

当访问mypath/:myMainId/:mySubId时，:mySubId的路由属于默认出口的路由树，Angular会优先匹配这个更具体的路径，而忽略同级的空路径路由（即MyMainComponent的路由）。同时，:mySubId的路由仅负责加载子模块，子模块的路由又指定了sidebar出口，所以默认出口没有任何组件被激活，导致MyMainComponent不加载。

而当你给默认出口命名后，MyMainComponent的路由被划归到这个命名出口的独立路由树中，它和:mySubId的路由（属于默认出口/无指定出口的路由树）不再是同级互斥的关系，Angular会同时匹配这两个不同出口的路由，因此所有组件都能正常渲染。

解决方案 #

推荐采用给默认出口命名并明确路由出口的方案，这是最直观且符合Angular多出口设计逻辑的做法：

1. 修改根组件的默认router-outlet，为其添加名称：

<router-outlet name="menu"></router-outlet>
<router-outlet name="main"></router-outlet>
<router-outlet name="sidebar"></router-outlet>

2. 修改主模块的路由配置，给MyMainComponent的路由指定outlet: 'main'：

[
  {
    path: ':myMainId',
    resolve: { myMainData: MyMainDataResolver },
    children: [
      {
        path: ':mySubId',
        resolve: { mySubData: MySubDataResolver },
        loadChildren: () =>
          import('./my-sub.module').then((m) => m.MySubModule)
      },
      { path: '', component: MyMainComponent, outlet: 'main' }
    ],
  },
  { path: '', component: MenuComponent, outlet: 'menu' }
]

这样调整后，main出口的路由和:mySubId的路由属于不同的出口路由树，Angular会同时激活这两个路由：

• main出口加载MyMainComponent（依赖myMainData）
• sidebar出口加载子模块的MySubComponent（依赖mySubData）
• menu出口始终加载MenuComponent

另外，如果你不想修改出口名称，也可以在:mySubId的子路由中添加默认出口的空路径路由，复用MyMainComponent：

[
  {
    path: ':myMainId',
    resolve: { myMainData: MyMainDataResolver },
    children: [
      {
        path: ':mySubId',
        resolve: { mySubData: MySubDataResolver },
        children: [
          { path: '', component: MyMainComponent },
          { path: '', loadChildren: () => import('./my-sub.module').then(m => m.MySubModule) }
        ]
      },
      { path: '', component: MyMainComponent }
    ],
  },
  { path: '', component: MenuComponent, outlet: 'menu' }
]

但这种方式会重复配置MyMainComponent，维护性不如第一种方案。

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