从 Angular 中的 URL 获取值答案

【问题标题】：Get values from URL in Angular从 Angular 中的 URL 获取值
【发布时间】：2021-12-30 08:34:46
【问题描述】：

我有一个名为 reset-password-modal 的组件。当用户获得重置密码的链接时，我需要使用此组件。在链接中，有关于用户、用户名、邮件和令牌的详细信息。我需要从给定的链接在 UI 上显示用户名、电子邮件。链接格式如下：http://localhost:4200/#/resetPassword?email=someone@something.com&userName=YourName&token=iAMyourTOKEN。

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

我尝试过的一些方法。

import { ActivatedRoute } from '@angular/router'

constructor(private activateRoute: ActivatedRoute){}

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

每次我收到一个 null 值作为回报。

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

【问题讨论】：

ngOnit?这是 ngOnInit 方法，你有一个错字
这能回答你的问题吗？ Get route query params

标签： angular typescript angular-router angular11

【解决方案1】：

无法使用paramMap 方法获取 queryParams，请阅读：

paramMap：一个 Observable，其中包含特定于路由的必需参数和可选参数的映射。该地图支持从同一参数中检索单个值和多个值。

这是一个 observable，如果你想从 URL 中获取一些必需的参数，你需要订阅它。

示例：

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

但您需要在您的路线中指定这一点：

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

要从您的 URL 获取查询参数，请使用：

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

【讨论】：

非常感谢！

【解决方案2】：

请尝试一下

import { ActivatedRoute } from '@angular/router'

email: string;

constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
this.route.queryParams
      .subscribe(params => {
        console.log(params); 
        this.email= params.email;
        console.log(this.email); 
      }
    );
}

向导：here

【讨论】：

【解决方案3】：

你可以试试这个：

 import { ActivatedRoute } from '@angular/router';

email: string;
constructor(private activateRoute: ActivatedRoute){}

ngOnInit(){
this.getParams();
}
getParams(){
this.activatedRoute.data.subscribe(params => {
  if(params){   
    this.email = params?.email;
 }
})
}

【讨论】：