Angular 16 中的 routerLink 更改

Question

当使用角度<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)”

我可以使用以下方法解决这个问题：

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

但目标是建立相对链接。我尝试使用“./”，但仍然遇到同样的问题。

保持与以前相同的行为的最佳方法是什么？

编辑：

当我正在迁移多个应用程序时，我注意到使用相对路由时确实会出现此问题。我在其他应用程序的绝对路径中没有遇到任何问题

Answer 1

我不确定这是否能解决您的问题，但我做了以下工作：

<button
  mat-raised-button
  color="primary"
  [routerLink]="['..', 'project-creator']"
>
   Text
</button>

这些路线是相对的，我什至可以设法使用“...”来升级。对我来说，诀窍是在我的独立组件中导入 RouterModule 。否则，按钮上不存在 routerLink 属性，因此您无法绑定到它。

为了清楚起见，这是我使用这些导入的组件

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { RouterModule } from '@angular/router';

@Component({
   selector: 'my-selector',
   standalone: true,
   imports: [CommonModule, MatButtonModule, RouterModule],
   templateUrl: './project-overview.component.html',
   styleUrls: ['./project-overview.component.scss'],
})
export class ProjectOverviewComponent {}

我不需要注入 RouterModule，导入它就足够了