Angular 16中routerLink相对路由格式异常问题求助

问题背景 #

Angular 16版本前路由配置正常，升级后相对路由生成的链接出现异常格式，希望保留相对路由形式的同时恢复原有跳转行为。

原路由配置（Angular 16之前） #

{
  path: Section.Security,
  canActivate: [AuthGuard, AccessGuard, AdminGuard],
  children: [
    {
      path: '',
      pathMatch: 'full',
      redirectTo: 'administrators'
    },
    {
      path: '',
      outlet: 'left-menu',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/components/left-menu/left-menu.component').then(m => m.SecurityLeftMenuComponent)
    },
    {
      path: 'administrators',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/pages/security/security.page').then(m => m.SecurityHomePage)
    },
    {
      path: 'contributors',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/pages/security/security.page').then(m => m.SecurityHomePage)
    },
    {
      path: 'readers',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/pages/security/security.page').then(m => m.SecurityHomePage)
    }
  ]
}

组件中使用的相对路由 #

SecurityLeftMenuComponent中的路由链接：

<a class="item"
   routerLinkActive="active"
   routerLink="administrators">
   <rn-key name="security::administrators" />
</a>

升级后的异常现象 #

升级到Angular 16后，routerLink生成的链接格式变为/security/(readers//left-menu:administrators)，使用./administrators也会出现相同问题。绝对路由routerLink="/security/administrators"可正常工作，但希望保留相对路由形式。

解决方案 #

Angular 16对相对路由的解析逻辑做了调整，针对带有命名路由出口的场景，需要明确指定相对路由的锚点路由，避免命名出口的路由影响主路由的相对跳转，以下是几种可行方案：

方案1：通过relativeTo指定父路由锚点 #

1. 在组件中注入ActivatedRoute：

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

constructor(private route: ActivatedRoute) {}

2. 修改模板中的routerLink，指定相对跳转基于父路由：

<a class="item"
   routerLinkActive="active"
   [routerLink]="['administrators']"
   [relativeTo]="route.parent">
   <rn-key name="security::administrators" />
</a>

通过route.parent指向/security父路由，确保相对路由基于主路由层级解析，而非命名出口所在的路由上下文。

方案2：显式指定主路由出口 #

在routerLink中明确指定目标路由对应主出口（默认主出口名称为primary），直接更新主出口路径：

<a class="item"
   routerLinkActive="active"
   [routerLink]="[{ outlets: { primary: 'administrators' } }]">
   <rn-key name="security::administrators" />
</a>

这种方式会忽略当前命名出口的路由上下文，生成符合预期的/security/administrators链接。

方案3：调整路由配置结构 #

如果允许修改路由配置，可将命名出口的路由从/security的子路由中移出，改为独立的同级辅助路由配置，这样相对路由的解析就不会受到命名出口的干扰。

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