Angular如何将HttpParams实例正确传入路由queryParams查询参数

Angular 路由的 queryParams 配置项仅接收 Params 类型的普通键值对对象，既不支持直接传入 HttpParams 类实例，也不支持传入序列化后的参数字符串：

• 传入 params.toString() 时，字符串类型与要求的 Params | null | undefined 类型不匹配，直接触发 TypeScript 类型报错
• 直接传入 HttpParams 实例时，路由会遍历实例的所有可枚举属性，把 encoder、map 等内部属性当成查询参数序列化，最终出现地址栏参数异常的问题

推荐通过遍历 HttpParams 的键列表，手动转换为普通对象，该方案完全兼容单值、多值参数场景：

const httpParams: HttpParams = new HttpParams().set('page', '2');
const queryParams: Record<string, string | string[]> = {};

// 遍历所有参数键转换为普通对象
httpParams.keys().forEach(key => {
  const values = httpParams.getAll(key);
  // 单值参数直接传字符串，多值参数传数组，路由会自动完成序列化
  queryParams[key] = values.length === 1 ? values[0] : values;
});

this.router.navigate([''], { queryParams });

如果你的项目仅用到单值参数，也可以简化逻辑直接用 httpParams.get(key) 赋值，无需判断值长度。

内容的提问来源于stack exchange，提问作者Олег Войтинський