如何在Angular的routerLink中使用含编码斜杠(%2F)的URL？

是否可以向routerLink传递包含%2F（编码斜杠）这类URL编码字符的URL？我尝试了四种方式但均无效。

给定字符串：objects/_%2F_
目标：仅借助Angular路由，生成一个href等于该输入字符串的<a>元素。

我尝试的四种写法如下：

<p><a [routerLink]="'objects/_%2F_'">objects/_%252F_</a></p>

<p><a [routerLink]="['objects/_%2F_']">objects/_%252F_</a></p>

<p><a [routerLink]="[{ segmentPath: 'objects/_%2F_' }]">objects%2F_%252F_</a></p>

<p><a [routerLink]="['', 'objects/_%2F_']">objects%2F_%252F_</a></p>

示例中<a>元素的文本内容为对应routerLink生成的URL。

额外需求：以该URL为基础，追加'_/_'得到'objects/_%2F_/_%2F_'（新路径段需转义）

背景说明：我计算了基础URL的编码，该URL的部分路径段包含需要转义的斜杠。目前应用中基础URL以字符串形式传递，我可以将其改写为路由命令数组，但想了解是否有方法直接使用字符串形式的基础URL解决问题。

解决方案 #

• 路由命令数组（推荐方案）
  Angular的路由系统会自动对路径段中的特殊字符进行编码，因此将包含斜杠的部分拆分为独立路径段即可：

<!-- 生成目标 href="objects/_%2F_" -->
<p><a [routerLink]="['objects', '_/_']">objects/_%2F_</a></p>

<!-- 追加路径段生成 href="objects/_%2F_/_%2F_" -->
<p><a [routerLink]="['objects', '_/_', '_/_']">objects/_%2F_/_%2F_</a></p>

这种方式无需手动处理编码，由Angular路由自动完成，是最可靠的实现方式。

• 字符串形式URL的处理方案
  如果必须使用字符串形式的基础URL，可通过自定义管道避免Angular的二次编码：

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

@Pipe({ name: 'preserveEncodedSlash' })
export class PreserveEncodedSlashPipe implements PipeTransform {
  constructor(private urlSerializer: UrlSerializer) {}

  transform(url: string): UrlTree {
    const decodedUrl = decodeURIComponent(url);
    return this.urlSerializer.parse(decodedUrl);
  }
}

使用管道的写法：

<p><a [routerLink]="'objects/_%2F_' | preserveEncodedSlash">objects/_%2F_</a></p>

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