Angular 13嵌套子路由配置后深层子组件未加载问题

Angular 嵌套路由的渲染逻辑要求：所有配置了children属性的路由对应的组件模板中，必须放置<router-outlet>标签作为子组件的渲染出口。
你当前的问题出在二级父路由skill-list对应的SkillListComponent组件模板中没有添加对应的路由出口：

1. 第一层父路由menu-list对应的MenuOptionsComponent内已经存在<router-outlet>，所以访问子路径时SkillListComponent可以正常渲染
2. 第二层父路由skill-list配置了子路由但组件内无路由出口，即使路由成功匹配到skill-add路径，也没有位置渲染SkillAddComponent，就会出现地址栏路径正确、控制台无报错但子组件不显示的现象。

方案1：保留嵌套路由结构（子组件在父组件页面内渲染） #

如果你的业务需求是在技能列表页内部嵌入新增/编辑技能的组件，按以下步骤修改：

1. 打开skill-list.component.html文件，在你需要渲染子组件的位置添加二级路由出口：

<!-- 此处放SkillListComponent原有业务代码，比如技能列表、操作按钮等 -->
<div class="skill-list-wrap">
  <!-- 原有列表渲染逻辑 -->
</div>

<!-- 嵌套子路由渲染出口 -->
<router-outlet></router-outlet>

2. 清理路由配置中的冗余项：你给inteview-details路由配置的pathMatch: 'full'是多余的，pathMatch: full仅适用于空路径重定向、需要完全精确匹配路径不匹配子路径的场景，普通子路由无需添加该配置，避免出现潜在的路由匹配异常。
   修正后的对应路由片段：

{
  path: 'inteview-details',
  component: InteviewDetailsComponent
},

3. 保存修改后重新访问http://localhost:4200/menu-list/skill-list/skill-add，SkillAddComponent就会在SkillListComponent的路由出口位置正常渲染。

方案2：调整路由层级（子组件独立页面渲染） #

如果你的业务需求是访问skill-add路径时，不显示SkillListComponent的内容，只展示新增技能页面，就不需要保留嵌套结构，把skill-add、skill-edit调整为和skill-list平级的路由即可，修改后的路由配置如下：

const routes: Routes = [
  {
    path: 'menu-list',
    component: MenuOptionsComponent,
    children: [
      { path: 'inteview-details', component: InteviewDetailsComponent },
      { path: 'edit-feedback', component: EditFeedbackComponent },
      { path: 'skill-list', component: SkillListComponent },
      { path: 'skill-list/skill-add', component: SkillAddComponent },
      { path: 'skill-list/skill-edit', component: SkillEditComponent },
    ]
  },
];

这种配置下不需要在SkillListComponent中添加额外的<router-outlet>，访问对应路径时会直接在MenuOptionsComponent的路由出口渲染对应组件。

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