使用 activateRoute 在 Angular 中访问编码的查询参数答案

【问题标题】：Accessing encoded query params in Angular using activatedRoute使用 activateRoute 在 Angular 中访问编码的查询参数
【发布时间】：2017-11-18 14:28:17
【问题描述】：

我有从另一个应用程序重定向后加载的 Angular 应用程序。当身份验证网站返回到我的 Angular 应用程序时，我想访问查询参数。网址看起来像

http://localhost:4200/#/starterview?openId%3Dhttps:%2F%2Fmy.fidesque.net%2Fopenid%2Fyobtest_smeuser%26email%3Dyobtest@gml.nl%26userAuthMode%3DSP=

我想访问查询参数，但我无法使用this.activatedRoute.snapshot.queryParams 正确执行此操作我怀疑这是由于编码参数。有什么解决办法吗？

问候，文基

【问题讨论】：

“我无法正确完成”是什么意思？您的代码是什么，您希望它做什么以及它会做什么？为什么网站使用这么可怕的参数名称，没有任何价值？
同样的问题，Angular 无法检索我的查询参数。有什么解决办法吗？

标签： angular typescript angular2-routing

【解决方案1】：

您可以使用 decodeURIComponent 对编码的 URL 进行解码，正如 Venky 所回答的那样。如果您知道查询参数并想从解码的 URL 中提取值。使用这个功能：

getQueryParamFromMalformedURL(name) {
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(decodeURIComponent(this.router.url)); // or window.location.href
    if (!results) {
        return 0;
    }
    return results[1] || 0;
}

如果url是http://localhost:4200/login?username=jerry&code=1234，那么

this.getQueryParamFromMalformedURL('username'); // should return 'jerry'

【讨论】：

【解决方案2】：

我使用以下代码对 URL 进行了解码。然后我可以正确提取参数

const encodedUrl = 'http://localhost:4200/#/starterview?openId%3Dhttps:%2F%2Fmy.fidesque.net%2Fopenid%2Fyobtest_smeuser%26email%3Dyobtest@gml.nl%26userAuthMode%3DSP='
const decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl);

【讨论】：