如何解决如何避免使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。