代码之家 › 专栏 › 技术社区 › POV

如何使用ActivatedRoute获取url参数?

angular

0

POV · 技术社区 · 7 年前

我的路线是:

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

组件是:

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

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

1 回复 | 直到 7 年前

1

0

jo_va 7 年前

使用 activatedRoute.queryParams 将提供一个包含查询参数的对象。 /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

如果您不想获得当前路线的可观察性,还可以使用以下内容获取快照:

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