如何使用ActivatedRoute获取url参数？

Question

我的路线是：

{
    path: "events",
    component: SkeletonComponent,
    children: [
       {
        path: ':id',
        component: ViewEventComponent
      }     
    ]
}

组件是：

constructor(private activatedRoute: ActivatedRoute) {
   this.activatedRoute.queryParams.subscribe(params => {
     console.log(params);
   })
}

Console.log() 给了我空对象{}

Answer 1

使用activatedRoute.queryParams 将为您提供一个包含查询参数的对象。 如果你的 url 是/events/1?param1=1&param2=2，这个对象就是：

{ param1: '1', param2: '2' }

查询参数是URL中?之后给出的键/值对。

如果您希望在路由配置中定义路由参数，例如 :id，则必须使用 activatedRoute.params 而不是 activatedRoute.queryParams。这将给出一个对象：

{ id: '1' }

对于像/events/1 这样的路由，其中​​路由定义为/events/:id。

以下是获取 id 参数的方法：

constructor(private activatedRoute: ActivatedRoute) {
   this.activatedRoute.params.subscribe(params => {
     console.log(params['id']);
   })
}

该值将以字符串形式给出，您可以使用Number(id) 或+id 将其转换为数字。

如果您不想获取当前路线的 observable，您还可以通过以下方式获取快照：

constructor(private activatedRoute: ActivatedRoute) {
   const id = +this.activatedRoute.snapshot.params['id'];
   console.log(id);
}