Angular2+ http 参数到路由器查询参数答案

【问题标题】：Angular2+ http params to router query paramsAngular2+ http 参数到路由器查询参数
【发布时间】：2021-09-17 12:28:51
【问题描述】：

我想将 HttpParams 类的实例传递给路由查询参数

const params: HttpParams = new HttpParams().set('page', '2')
this.router.navigate([''],{queryParams: params.toString()});

我得到了一个错误：

Type 'string' is not assignable to type 'Params | null | undefined'

如果我直接传递参数而不转换为字符串，我不会得到正确的结果得到这样的东西：

?encoder=%5Bobject%20Object%5D&map=%5Bobject%20Map%5D

【问题讨论】：

你应该使用NavigationExtras来处理这种事情。

标签： angular parameters routes query-parameters

【解决方案1】：

错误可以自行解释。您必须传递类型为 Params 的 queryParams 才能正常工作。您可以构造一个对象，然后遍历所有参数，设置对象中的值。然后将对象传递给 queryParams。比如——

const params: HttpParams = new HttpParams().set('page', '2');
const queryParams = {};
params.keys().forEach((key) => {
    queryParams[key] = params.get(key);
});
this.router.navigate([''],{queryParams});

【讨论】：