angular - 从 Angular 中的 URL 获取值

Question

我有一个名为重置密码模式的组件。当用户获得重置密码的链接时，我需要使用此组件。 链接中包含有关用户、用户名、邮件和 token 的详细信息。 我需要从给定的链接在用户界面上显示用户名、电子邮件。 链接的格式是这样的:http://localhost:4200/#/[email protected] &userName=您的名字&token=iAMyourTOKEN。

我引用了 StackOverflow 上许多关于如何使用 Angular 的 ActivatedRoute 的答案。但无法获得所需的输出。

我尝试过的一些方法。

import { ActivatedRoute } from '@angular/router'

constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
const email = String(this.activateRoute.snapshot.paramMap.get('email'))
    console.log(email);
}

每次我收到 null 值作为返回时。

我尝试的另一种方法是使用queryParamMap，但无法检索所需的信息。 我也尝试过订阅参数但没有帮助。 任何帮助表示赞赏。 谢谢。

Answer 1

不可能使用 paramMap 方法获取 queryParams，请阅读以下内容:

paramMap: An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter.

它是一个可观察对象，如果你想从 URL 获取一些必需的参数，你需要订阅它。

示例:

this.route.paramMap.subscribe((obs) => {
      console.log(obs.get('id'));
    });

但是您需要在 route 指定这一点:

{ path: ':id', component: ContactIdComponent }

要从您的 URL 获取查询参数，请使用以下命令:

 this.route.queryParams.subscribe((query: Params) => {
      console.log(query);
    });