Angular中routerLink如何传入字符串与变量混合值实现路由导航

问题描述 #

我正在为Angular Web应用实现本地化功能，语言切换器基于transloco开发。transloco的路由规则是在域名后直接拼接两位语言编码（例如/en/），接口、子路径都统一放在语言编码之后。

本地化改造前可正常运行的旧代码如下：

<div class="navbar-brand">
  <ng-container *ngIf="sites$ | async as sites">
    <a [matMenuTriggerFor]="menu" href="javascript:void(0);">{{ siteName$ | async }}</a>
    <mat-menu #menu="matMenu">
      <button *ngIf="admin$ | async" mat-menu-item routerLink="admin">Admin</button>
      <button *ngFor="let site of sites" mat-menu-item [routerLink]="site.id">{{ site.name }}</button>
    </mat-menu>
  </ng-container>
</div>

为保证应用加载时能跳转到正确页面，我先把固定路由admin改成了en/admin，但site.id是动态变量，不知道怎么把固定的语言前缀和动态变量拼接后传给routerLink。尝试过以下写法，无法正常运行：

<div class="navbar-brand">
  <ng-container *ngIf="sites$ | async as sites">
    <a [matMenuTriggerFor]="menu" href="javascript:void(0);">{{ siteName$ | async }}</a>
    <mat-menu #menu="matMenu">
      <button *ngIf="admin$ | async" mat-menu-item routerLink="en/admin">Admin</button>
      <button *ngFor="let site of sites" mat-menu-item [routerLink]="'en' + /site.id">{{ site.name }}</button>
    </mat-menu>
  </ng-container>
</div>

补充说明：改造前点击站点选项会正常加载对应站点内容，现在虽然路由跳转的地址正确，但页面始终显示Admin模块内容，尝试常见方案未解决。

解决方案 #

1. 修正动态路由拼接语法 #

之前的动态路由绑定存在语法错误，正确写法有两种：

• 字符串直接拼接：

<button *ngFor="let site of sites" mat-menu-item [routerLink]="'en/' + site.id">{{ site.name }}</button>

• Angular官方推荐的数组写法（自动处理路径斜杠，避免格式错误）：

<button *ngFor="let site of sites" mat-menu-item [routerLink]="['en', site.id]">{{ site.name }}</button>

2. 修复路由匹配错误问题 #

路由地址正确但一直显示Admin内容的根源是硬编码语言前缀+相对路由匹配逻辑错误：不带根路径标记的routerLink默认相对于当前激活路由拼接，当处于/en/admin路径下点击站点链接时，路由会被错误拼接到Admin子路由层级，最终命中Admin模块的路由规则。

最优修复方案是不要硬编码语言前缀，直接读取Transloco当前激活语言，同时指定从根路径开始拼接路由，彻底避免层级错误，完整实现如下：
模板代码：

<div class="navbar-brand">
  <ng-container *ngIf="sites$ | async as sites">
    <a [matMenuTriggerFor]="menu" href="javascript:void(0);">{{ siteName$ | async }}</a>
    <mat-menu #menu="matMenu">
      <button *ngIf="admin$ | async" mat-menu-item [routerLink]="['/', translocoService.getActiveLang(), 'admin']">Admin</button>
      <button *ngFor="let site of sites" mat-menu-item [routerLink]="['/', translocoService.getActiveLang(), site.id]">{{ site.name }}</button>
    </mat-menu>
  </ng-container>
</div>

组件类中注入Transloco服务：

import { TranslocoService } from '@ngneat/transloco';

export class NavbarComponent {
  constructor(public translocoService: TranslocoService) {}
  // 原有业务逻辑保持不变
}

改造后的优势：

• 无需硬编码en这类固定语言编码，切换语言时路由会自动匹配当前激活语言
• 路由数组首元素传/表示从应用根路径开始拼接，完全避免相对路由层级错乱的问题
• 符合Transloco路由本地化的官方最佳实践，后续新增语言无需修改模板代码

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