angular - 为什么 ActivatedRoute.queryParams 在 Angular 中不起作用？

Question

我在我的 Angular 应用程序中使用路由。

我的路由模块中有以下路由。

{
    path: 'user/:name',
    component: UserComponent,
}

我正在使用queryParamsofActivatedRoute从路线中获取名称。这是我的代码。

this.activatedRout.queryParams.subscribe( params => {

  this.user_name = params['name'];

});

但是params是未定义的。请帮我。

Answer 1

为了理解，您有一个路线user/karthik?style=awesome，例如，部分karthik是参数:name，而您需要style=awesome，这是查询参数，这就是它的原因undefined。

如果您打算订阅参数更改，请使用paramMap，而不是queryParam。

this.activatedRout.paramMap.subscribe( params => {
 this.name = params['params']['name']
});

或者您可以使用params：

this.activatedRout.params.subscribe( params => {
 this.name = params['name'];
});

Answer 2

this.activatedRout.params.subscribe(({name}) => {
    this.user_name = name;
});

Answer 3

应该params不是queryParams

this.activatedRout.params.subscribe( params =>{this.user_name = params['name'];});

Answer 4

我知道这里有一个公认的答案，但它缺少关于什么的关键细节queryParams。这是我的笔记：

// { path: 'user/:name'...

// access route params from router ie 'joe' from URL example.com/user/joe
this.route.params.subscribe(params => {
    console.log(params); // access the user name param 
});

// map your router parameter values
this.route.paramMap.subscribe(data => {
    console.log(data);
    // this.name = params['params']['name']
});

// access URL query parameters ie. example.com/?x=7680&y=4320
this.route.queryParams.subscribe(params => {
    console.log(params);
});