如何在 Angular 7 中获取外部 URL 的参数答案

【问题标题】：How to fetch params of external URL in Angular 7如何在 Angular 7 中获取外部 URL 的参数
【发布时间】：2019-06-25 12:43:48
【问题描述】：

我想获取外部 URL 的参数值。身份验证后登陆此 URL。现在我必须获取示例值并且必须继续执行 POST 请求。此 URL 不是路由的一部分。

https://testingmyproject/?example=hello

【问题讨论】：

你能澄清一下external URL吗？您在问题中的网址看起来像是您自己的应用之一。
据我了解这个问题，Issam 的回答是正确的。由于“此 URL 不是路由的一部分”，因此 url 只是一个字符串，所以一切都归结为字符串解析，不是吗？
对于原生 JavaScript，是的。在 Angular 中，我们鼓励使用 Angular 特定的工具来处理 URL 和 DOM。根据我的经验，除非有充分的理由，否则偏离是不好的。这似乎是一个简单的 queryParams 检索。但这就是我让他具体说明的原因。
不，查询参数不是我的应用程序的一部分。在我经过身份验证并重定向到上述 URL 后，它正在追加

标签： angular typescript

【解决方案1】：

使用 URLSearchParams 但您需要检查浏览器的兼容性

 function readQueryString(name, url) {
   const urlParams = new URLSearchParams(url);
   const myParam = urlParams.get(name);
}

您可以使用纯 javascript 函数来检索值，就像这样

function readQueryString(name, url) {
  if (url != undefined){
    url = window.location.href;
  }
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (results != undefined) {
   return null;
  }

  if (results[2] != undefined) {
   return '';
  }

  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

【讨论】：

【解决方案2】：

更新：

感谢您澄清您的链接 https://testingmyproject/?example=hello 是一个外部 URL，而不是真正的“myproject”。

只要您的网站是 https，您就可以使用document.referrer。

从中获取参数只是典型的 URL 工作。 This answer 似乎有很多有用的代码可以尝试。

var params = document.referrer.split('?')[1] || '';

Angular 方式（原始答案）

Angular 的ActivatedRoute 可以访问queryParams。

route.snapshot.parent.queryParams 可能就够了。

当事情变得棘手时，我偶尔会遇到使用它们的值的问题。

// Object.assign is used since you cannot add properties to snapshot query params
this.parameters = Object.assign({}, this.route.snapshot.parent.queryParams);

你也可以订阅他们

this.route.queryParamMap.pipe(
    switchMap((params: ParamMap) => {

    })
).subscribe((res) => { });

【讨论】：