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

问题描述

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

当我尝试访问http：// localhost：4200 / test？url = http：// abc / item％2F2 / 3时，Angular正在对queryParams进行编码，因此我使用CustomUrlSerializer对其进行了如下解码，但我想保留相同的queryParam而不进行编码或解码

但是目前该网址已解码，并在浏览器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

解决方法

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