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将为您提供一个包含查询参数的对象。如果您的网址是/events/1?param1=1&param2=2，则此对象将是：

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

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

如果您想在路由配置中定义路由参数，例如: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将其转换为数字。

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

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

如何使用ActivatedRoute获取url参数？

1 个答案: