Angular辅助路由失效：嵌套RouterOutlet无法加载子组件问题排查

我帮你梳理几个最容易导致子组件无法加载到嵌套Router Outlet的坑点，你可以逐一排查：

• 路由配置未设置正确的嵌套结构
  这是最常见的问题！你需要确保admin1和admin2是ProgramComponent的子路由，而不是同级路由。正确的路由配置应该是这样的：

  const routes: Routes = [
    {
      path: 'program',
      component: ProgramComponent, // 这个组件包含嵌套的router-outlet
      children: [
        { path: 'admin1', component: Admin1Component },
        { path: 'admin2', component: Admin2Component },
        // 可选：设置默认子路由，访问/program时自动跳转到admin1
        { path: '', redirectTo: 'admin1', pathMatch: 'full' }
      ]
    }
  ];
  

  要是你把admin1/admin2直接定义在根路由数组里，它们会被加载到根Router Outlet，而不是ProgramComponent里的那个。

• 父组件的模板里缺少Router Outlet标签
  别小看这个细节！你得确认ProgramComponent的模板文件里确实有<router-outlet></router-outlet>标签，而且没有拼写错误。如果是多Outlet场景才需要加name属性，这里用默认的就好。

• 导航路径错误
  导航子组件的时候，要使用完整的路径或者正确的相对路径：

  • 在模板里用路由链接：<a routerLink="/program/admin1">打开Admin1</a>
  • 在组件类里导航：this.router.navigate(['/program/admin1']);
    如果是在ProgramComponent内部做相对导航，也可以写成['./admin1']，但要确保相对路径的上下文正确。

• 路由模块的导入与配置有误
  如果你是用特性模块管理路由，要确保：

  1. 特性模块里用RouterModule.forChild(routes)配置子路由
  2. 这个特性模块已经被正确导入到根模块或者上层模块
     如果是懒加载模块，要确认loadChildren的路径指向正确的模块文件，比如：

  {
    path: 'program',
    loadChildren: () => import('./program/program.module').then(m => m.ProgramModule)
  }
  

• 路由匹配顺序冲突
  Angular路由是按数组顺序匹配的，如果前面有路由规则和你的子路由路径冲突，会优先匹配前面的规则。比如如果根路由里有个path: 'admin1'的规则，就会抢走/program/admin1的匹配权，所以要确保路由顺序合理，子路由放在父路由的children里。

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