Angular aux命名路由出口嵌套路由无法匹配问题求助

问题原因&解决方法 #

• 1. 命名出口路由跳转写法错误
  带name属性的命名路由出口（aux outlet）不能直接用路径字符串跳转，必须通过数组格式显式指定对应出口的路径，你当前的routerLink="/snippets/headers"写法会被Angular识别为主出口的路由，自然匹配失败。
  修改跳转代码如下：

<a [routerLink]="['/snippets', { outlets: { snippetOutlet: 'headers' } }]" routerLinkActive="current" class="tabs">Header</a>

• 2. 路由配置与出口位置不匹配
  你当前把headers配置为snippets的子路由，且指定渲染到snippetOutlet出口，但这个出口是定义在根组件app.component.html中的，子路由对应的出口必须放在父路由组件（也就是snippetsComponent）的模板里才能生效。
  可以根据你的需求二选一调整：

  • 方案A：把<router-outlet name="snippetOutlet"></router-outlet>从根组件移到snippetsComponent的模板中，保留现有路由配置即可
  • 方案B：把headers路由从snippets的children中移出，改为同级路由，适配根级出口：

    const appRoutes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: IntroductionComponent
      },
      {
        path: 'snippets',
        component: snippetsComponent
      },
      {
        path: 'headers',
        component: HeadersComponent,
        outlet: 'snippetOutlet'
      },
      {
        path: 'layout',
        component: LayoutComponent
      },
    ];
    

• 3. 报错出现home/headers路径说明
  你当前的错误日志显示URL段为home/headers，是因为错误的跳转写法被识别为相对路径跳转，在/home页面下拼接路径导致的，修改跳转写法后即可解决。

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