如何避免使用 CustomSerializer 在 Angular 中解码 queryParams

Question

我正在使用以下 URL queryParams 策略访问 Angular 应用程序

当我尝试访问 http://localhost:4200/test?url=http://abc/item%2F2/3 时，Angular 正在编码 queryParams，因此我使用 CustomUrlSerializer 将它们解码回来，如下所示，但我想要在不编码或解码的情况下保留相同的 queryParam

但当前 url 已解码并在浏览器 URL 中显示为 http://localhost:4200/test?url=http://abc/item/2/3

但我希望 URL 保持不变，即 http://localhost:4200/test?url=http://abc/item%2F2/3

有人可以为我提供更好的解决方案来处理这种情况吗？

import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';

export class MyUrlSerializer implements UrlSerializer {
    public ds = new DefaultUrlSerializer();

    parse(url: any): UrlTree {
        return this.ds.parse(url);
    }

    serialize(tree: UrlTree): any {
        const serializedUrl = this.ds.serialize(tree);
        return serializedUrl
            .replace(/%40/gi, '@')
            .replace(/%3A/gi, ':')
            .replace(/%24/gi, '$')
            .replace(/%2C/gi, ',')
            .replace(/%3B/gi, ';')
            .replace(/%20/gi, '+')
            .replace(/%3D/gi, '=')
            .replace(/%3F/gi, '?')
            .replace(/%2F/gi, '/');
    }
}

Slick Grid 演示：https://stackblitz.com/edit/angular-router-basic-example-fm1xua

Answer 1

一旦您通过浏览器查询字符串参数 URL 发送任何特殊字符，它就会由 encodeURIComponent 或 decodeURIComponent 自动编码/解码。两者都是 javascript 全局函数。

你可以这样处理：

const myUri = 'http://abc/item/2/3';

const myEncodedUri = encodeURIComponent(myUri);
console.log(myEncodedUri);
// http%3A%2F%2Fabc%2Fitem%2F2%2F3

const myDecodedUri = decodeURIComponent(myEncodedUri);
console.log(myDecodedUri);
// http://abc/item/2/3