时间戳

首页 > 解决方案 > 如何避免使用 CustomSerializer 在 Angular 中解码 queryParams

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

问题描述

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

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

但目前 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, '/');
    }
}

光滑网格演示：https ://stackblitz.com/edit/angular-router-basic-example-fm1xua

标签： angularurl-routingangular2-routingquery-parameters

解决方案

一旦您通过浏览器查询字符串参数 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

推荐阅读