Angular嵌套路由硬编码中间组件时子路由无法渲染问题问询

问题结论 #

你当前的写法无法生效，原因是Angular的子路由匹配与路由树层级严格绑定：只有通过<router-outlet>渲染的组件才会被纳入路由树节点，硬编码插入的组件没有对应的路由上下文，其关联的RoutingModule中定义的子路由不会被当前路由树识别，自然无法渲染子组件。

解决方案 #

可以通过空路径路由占位的方式实现需求，不需要硬编码组件，也不会在URL中暴露bar层级，完全符合你的路径规则要求：

调整路由配置 #

修改上层路由（通常是Home模块的路由配置），给foo路由增加空路径子路由来挂载Bar组件，再将baz/qux等子路由挂在该空路由下：

const routes: Routes = [
  // 根层级路由
  { path: 'not-home', component: NotHomeComponent },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      { path: 'not-foo', component: NotFooComponent },
      // foo路由配置
      {
        path: 'foo',
        component: FooComponent,
        children: [
          // 空路径占位，匹配/home/foo时自动渲染Bar，URL不会出现bar段
          {
            path: '',
            component: BarComponent,
            children: [
              { path: 'baz', component: BazComponent },
              { path: 'qux', component: QuxComponent },
              { path: 'quux', component: QuuxComponent },
              // 可按需增加子路由，或加通配符处理未匹配路径
              { path: '**', redirectTo: 'baz' }
            ]
          }
        ]
      }
    ]
  }
]

配套组件调整 #

1. Foo组件模板删除硬编码的<app-bar></app-bar>，仅保留<router-outlet></router-outlet>即可
2. Bar组件模板中增加<router-outlet></router-outlet>，用于渲染baz/qux等子组件

方案效果 #

完全满足所有需求：

• 所有要求的路径/home、/not-home、/home/foo、/home/not-foo均可正常访问
• 访问/home/foo时Bar组件自动渲染，URL不会出现bar层级
• 后续新增/home/foo/xxx路径仅需要在Bar的空路由children中新增配置即可，无需修改上层组件结构
• 不需要硬编码组件，完全走Angular标准路由机制，维护成本更低

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