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

Question

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

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

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

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

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

应该是params不是queryParams

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

Answer 3

this.activatedRout.params.subscribe(({name}) => {
    this.user_name = 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);
});

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

Why ActivatedRoute.queryParams is not working in Angular?

angular

typescript

angular-routing

query-parameters

angular-activatedroute