在Angular路由中使用QueryParams

时间:2017-11-03 17:41:27

标签: angular angular-routing

因此,我有一个后端负责在用户创建帐户时向用户发送确认电子邮件,该电子邮件的格式如下:http://localhost:8080/confirm?token=

然后我希望在我的前端(使用Angular制作)具有相同格式的路由,所以我的问题是如何在我的应用程序路由中表示此URL。我目前正在尝试使用{ path: 'confirm', paramMap: { token : token } },但不确定这是处理此问题的最佳方法,这是我第一次做这样的事情,所以我很感激任何输入:)

我后来需要在服务中使用该令牌值,所以我需要一种方法来在"确认"中获取它的值。组件或其他东西。

2 个答案:

答案 0 :(得分:1)

我在此处有一个使用查询参数的示例:https://github.com/DeborahK/MovieHunter-routing

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

enter image description here

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

答案 1 :(得分:1)

在Component构造函数中注入ActivatedRoute,然后使用ActivatedRoute实例访问params。

    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.
   })

   }
}

这只是示例。