Angular 4 获取查询字符串

Question

为公司网站制作 angular 入职页面。人们将通过包含用户特定令牌的欢迎电子邮件中的 link 导航到该页面。我需要从 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);
}

这将 return 一个 ParamMap 界面，实际上是受 URLSearchParams 界面启发:)

您可以执行类似 route.queryParamMap.get('myQueryParam') 的操作，它会如您所愿地工作。

Angular 4 获取查询字符串

Angular 4 get queryString

location

query-string

angular