Angular命名嵌套路由重复嵌套问题排查求助

我现有ClazzComponent、ClazzModule和ClazzRouting Module，ClazzComponent通过AppComponent的主<router-outlet>渲染。ClazzComponent包含SlideOverComponent，后者带有命名路由出口<router-outlet name="slideover">。SlideOverComponent的tab导航用[routerLink]指向该命名出口，首次导航标签页时URL正常（/clazz/(slideover:overview)），但再次点击任意标签页时，路由会跳转到错误URL：/clazz/(slideover:/(overview//slideover:overview))。以下是相关路由配置及组件代码，请问哪里操作有误？

app-routing.module.ts（懒加载注册ClazzComponent） #

export const appRoutes: Route[] = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'clazz',
  },
  {
    path: 'clazz',
    loadChildren: () =>
      import('./features/clazz/clazz.module').then((m) => m.ClazzModule),
  },
  {
    path: 'model',
    loadChildren: () =>
      import('./features/model/model.module').then((m) => m.ModelModule),
  },
  {
    path: '**',
    redirectTo: 'clazz',
    pathMatch: 'full',
  },
];

clazz-routing.module.ts（命名路由出口子路由配置） #

const routes: Routes = [
  {
    path: '',
    component: ClazzComponent,
    children: [
      {
        path: 'overview',
        component: OverviewTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'classes',
        component: ClassesTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'context',
        component: ContextTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'relation-library',
        component: RelationLibraryTabComponent,
        outlet: 'slideover',
      },
      {
        path: 'manage',
        component: ManageTabComponent,
        outlet: 'slideover',
      },
    ],
  },
];

clazz.component.html #

<app-slide-over></app-slide-over>

slide-over.component.html（包含命名路由出口） #

<app-slide-over-tabs></app-slide-over-tabs>
<router-outlet name="slideover"></router-outlet>

slide-over-tabs.component.html（导航链接） #

<a [routerLink]="[{outlets: { slideover: ['overview'] } }]">Overview</a>
<a [routerLink]="[{outlets: { slideover: ['classes'] } }]">Classes</a>
<a [routerLink]="[{outlets: { slideover: ['context'] } }]">Context</a>
<a [routerLink]="[{outlets: { slideover: ['relation-library'] } }]">Relation Library</a>
<a [routerLink]="[{outlets: { slideover: ['manage'] } }]">Manage</a>

问题原因与修复方法 #

问题出在[routerLink]的配置逻辑上：当前的相对导航写法会基于当前激活的命名路由状态叠加路由信息，多次点击后就会出现嵌套的错误路由格式。

修复方案1：使用绝对路径导航 #

直接指定完整的路由路径，避免相对导航的叠加问题：

<a [routerLink]="['/', 'clazz', { outlets: { slideover: 'overview' } }]">Overview</a>
<a [routerLink]="['/', 'clazz', { outlets: { slideover: 'classes' } }]">Classes</a>
<a [routerLink]="['/', 'clazz', { outlets: { slideover: 'context' } }]">Context</a>
<a [routerLink]="['/', 'clazz', { outlets: { slideover: 'relation-library' } }]">Relation Library</a>
<a [routerLink]="['/', 'clazz', { outlets: { slideover: 'manage' } }]">Manage</a>

修复方案2：指定相对父路由 #

在组件中注入ActivatedRoute，明确导航相对于父路由（ClazzComponent对应的空路径）：

1. 修改slide-over-tabs.component.ts：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-slide-over-tabs',
  templateUrl: './slide-over-tabs.component.html',
})
export class SlideOverTabsComponent {
  constructor(public route: ActivatedRoute) {}
}

2. 修改模板中的导航链接：

<a [routerLink]="[{ outlets: { slideover: 'overview' } }]" [relativeTo]="route.parent">Overview</a>
<a [routerLink]="[{ outlets: { slideover: 'classes' } }]" [relativeTo]="route.parent">Classes</a>
<a [routerLink]="[{ outlets: { slideover: 'context' } }]" [relativeTo]="route.parent">Context</a>
<a [routerLink]="[{ outlets: { slideover: 'relation-library' } }]" [relativeTo]="route.parent">Relation Library</a>
<a [routerLink]="[{ outlets: { slideover: 'manage' } }]" [relativeTo]="route.parent">Manage</a>

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