在 Angular 路由中使用 QueryParams答案

【问题标题】：Using QueryParams in Angular route在 Angular 路由中使用 QueryParams
【发布时间】：2017-11-03 17:41:26
【问题描述】：

所以我有一个后端负责在用户创建帐户时向他们发送确认电子邮件，电子邮件的格式如下：http://localhost:8080/confirm?token=

然后我想在我的前端（使用 Angular 制作）有相同格式的路由，所以我的问题是这个 url 应该如何在我的应用程序路由中表示。我目前正在尝试使用{ path: 'confirm', paramMap: { token : token } }，但不确定这是处理这个问题的最佳方式，这是我第一次做这样的事情，所以我很感激任何意见:)

我稍后需要在服务中使用该令牌值，因此我需要一种在“确认”组件或其他内容中获取其值的方法。

【问题讨论】：

您没有在路由中包含参数。如果组件需要访问查询参数，它可以通过ActivatedRoute 订阅它们。我建议阅读angular.io/guide/router
你知道任何使用示例吗？
文档中确实有一些。这就是它的用途。

标签： angular angular-routing

【解决方案1】：

在组件构造函数中注入 ActivatedRoute，然后使用 ActivatedRoute 实例访问参数。

    export class TestComponent Implements OnInit
    {
     token:string;
    constructor(private route:ActivatedRoute)
    {
    }
   ngOnInit()
   {
    route.params.subscribe((params:Params)=>{
      this.token=params['token'];
      //Or call your service to load the resource you need.
   })

   }
}

这只是示例。

【讨论】：

【解决方案2】：

我这里有一个使用查询参数的例子：https://github.com/DeborahK/MovieHunter-routing

正如 Jon 所说，您没有在路由配置中指定查询参数：

更新：更新了屏幕截图以更正拼写错误和最新语法。

【讨论】：