Angular 17中如何添加不转义URL编码的插值表达式？

我在Angular中使用插值表达式给routeLink绑定完整URL字符串时，页面运行后URL会被错误转义：

• 预期结果：http://localhost:4200/books?page=3&sort=title
• 实际返回：http://localhost:4200/books%3Fpage%3D3&sort%3Dtitle

当前代码示例：

<li *ngFor="let pageUrl of pageUrls" class="page-item">
  <a class="page-link" routerLink="{{ pageUrl.url }}">{{ pageUrl.index }}</a>
</li>

解决方案 #

方案1：拆分路径与查询参数（推荐）

Angular的routerLink会把插值绑定的完整字符串当作路由路径的一部分，因此会转义?、=这类特殊字符。正确的做法是将路由路径和查询参数分开绑定：

调整pageUrls的数据结构，拆分出路径和参数对象：

// 示例数据结构
pageUrls = [
  { 
    index: 3, 
    path: '/books', 
    queryParams: { page: 3, sort: 'title' } 
  }
];

然后在模板中使用属性绑定：

<li *ngFor="let pageUrl of pageUrls" class="page-item">
  <a class="page-link" 
     [routerLink]="[pageUrl.path]" 
     [queryParams]="pageUrl.queryParams">
    {{ pageUrl.index }}
  </a>
</li>

方案2：使用自定义管道解析完整URL

如果无法修改pageUrls的结构，必须使用完整URL字符串，可以编写一个自定义管道来解析URL，让routerLink能正确识别路径和参数：

1. 创建解析URL的管道：

import { Pipe, PipeTransform } from '@angular/core';
import { UrlTree, Router } from '@angular/router';

@Pipe({ name: 'parseUrl' })
export class ParseUrlPipe implements PipeTransform {
  constructor(private router: Router) {}
  
  transform(url: string): UrlTree {
    return this.router.parseUrl(url);
  }
}

2. 在模板中使用管道：

<li *ngFor="let pageUrl of pageUrls" class="page-item">
  <a class="page-link" [routerLink]="pageUrl.url | parseUrl">
    {{ pageUrl.index }}
  </a>
</li>

这个管道会将完整URL解析为Angular的UrlTree对象，routerLink能正确识别其中的路径和查询参数，避免不必要的转义。

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