使用 activatedRoute 访问 Angular 中的编码查询参数

Question

我有 angular 应用程序是在从另一个应用程序重定向后加载的。我想在身份验证网站 returns 到我的 Angular 应用程序时访问查询参数。 url 看起来像

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

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

此致，温基

Answer 1

我使用以下代码解码了 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);

Answer 2

您可以使用 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'

使用 activatedRoute 访问 Angular 中的编码查询参数

Accessing encoded query params in Angular using activatedRoute

typescript

angular2-routing

angular