如何从 Angular 中的 URL 获取准确的查询参数答案

【问题标题】：How to get exact query params from URL in Angular如何从 Angular 中的 URL 获取准确的查询参数
【发布时间】：2020-12-10 06:01:21
【问题描述】：

我关注另一个关于获取查询参数的堆栈溢出帖子。但是，查询参数的值包含“%2”，当以我的角度输出时，它会将其转换为“+”。另外，我的 param2 不存储整个值“testingsomething?INT/”，它在 '?' 之前停止。

示例：

*Query Param*
/app?param1=hallo%2testing111&param2=testingsomething?INT/

component.ts 中的代码

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
        console.log(this.param1);
        console.log(this.param2);


    });
}

输出

hallo+testingsomething

如您所见，我的“%2”在存储参数时转换为“+”。和 testingsomething 预期的输出应该是“testingsomething?INT/”

更新

我能够解决 param1 中的问题（在答案部分提到了答案）。

我仍然遇到 param2 的问题。能够提取确切的参数“testingsomething?INT/”

参考： How to get query parameters from URL in Angular 5?

【问题讨论】：

你是如何生成这个网址的？如果 url 包含特殊字符，它们应该在生成 url 时已经被 UrlEncoded。因此，您应该使用%252 而不是字面意义上的%2，以便在角度上获得%2
不只是 %2。如果用户令牌以 %2F 的形式出现，则它变为“/”。有什么办法可以避免在将其存储为角度时转换它？
您如何/在哪里生成此网址？请将此代码 sn-p 添加到您的问题中，以便我们为您提供帮助。
我无权访问后端代码或有关他们如何生成此查询参数值的逻辑。我只知道生成的一些值将包含“%”。根据我的要求是提取这些查询参数并利用它们。
Angular 正在正确读取查询参数。必须更新您的后端代码才能对查询字符串中的参数值进行 urlencode。没有其他办法了。如果你想有创意，你可以使用 window.location.href，找到第一个?，从那里找到子字符串，然后手动处理。但这只是解决另一个地方出现问题的方法

标签： angular

【解决方案1】：

我能够找到能够帮助解决 param1 问题的参考。 Reference

这是解决我的问题的代码更改。上面的代码相同，但这一行发生了变化。

this.param1 = encodeURIComponent(params['param1']);

新输出

hallo%2testingsomething

【讨论】：