Angular 4 获取查询字符串

Question

为企业网站制作一个有角度的入职页面。人们将通过包含用户特定令牌的欢迎电子邮件中的链接导航到该页面。我需要从 url 查询字符串中取出这个令牌，并在所有 ajax 调用中使用它来进行身份验证。我的问题是读取查询字符串。

Angular 版本是 4.2.4

我已经梳理了关于“@angular/common”位置、LocationStrategy、PathLocationStrategy 的文档页面，并复制粘贴了导入并将它们添加到提供程序，我在一个又一个错误之后得到错误。我在任何地方都找不到导入位置并使用它从页面 url 获取查询字符串的简单示例。如果这是 javascript，那将是非常简单的几行代码。为什么这么难？任何帮助将不胜感激！

我尝试了什么：

app.module.ts

import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],

page.services.ts

constructor(private location: Location) {
  console.log('location: ', location);
}

Answer 1

您可以使用 @angular/router 包中的 Angular 的 ActivatedRoute 来执行此操作。像处理其他模块一样将其导入到您的模块中，然后像使用 Location 一样将其注入到您的组件中。然后你可以访问queryParamMap 喜欢：

constructor(private route: ActivatedRoute) {
  console.log(route.snapshot.queryParamMap);
}

这将返回一个ParamMap 接口，它实际上是受到URLSearchParams 接口的启发:)

您可以执行route.queryParamMap.get('myQueryParam') 之类的操作，它会按您的预期工作。