Angular 16中的routerLink更改

Question

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

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

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

但目标是要有相对链接。 我尝试使用"./"，但仍然存在同样的问题。

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

编辑：

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

- ssougnez

Answer 1

我在我的端上遇到了相同的问题，使用的是 @angular/router@16.1.1。 这与该问题相关联：https://github.com/angular/angular/issues/50611

为了确认这一点，在迁移之前（ng 15.x），你可以测试一下导航功能。导航正常工作，但是如果你查看控制台，你应该会看到一个警告，类似于：

在即将发布的 Angular 版本中，导航至 /list/(details:item-1) 将改为 /list/(/(details:item-1)//details:item-2)。可能需要从 UrlCreationOptions 中删除 relativeTo。

根据我的理解，目前唯一可用的解决方法是避免使用相对链接，而坚持使用绝对链接。

- Alvaro Costa

Answer 2

我不确定这是否解决了你的问题，但是我让以下代码工作起来了：

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

路由是相对的，我甚至可以使用“……”向上一级。

对我有帮助的是在我的独立组件中导入RouterModule。否则，属性routerLink不存在于button上，因此无法将其绑定。

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

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，只需导入它即可

- Tabea