Angular传递对象数组作为查询参数时出现%255B编码异常求助

我来帮你搞定这个查询参数的问题！你遇到的%255B其实是双重编码导致的——Angular的HttpParams（包括路由的queryParams）在处理参数值时，会自动对内容进行URI编码，而你又额外调用了encodeURI，相当于把同一个内容编码了两次：原本的[先被编码成%5B，第二次编码就变成了%255B，这才导致解析出问题。

正确的处理步骤： #

1. 传递参数时：只做JSON序列化，不要手动编码

直接用JSON.stringify把对象数组转换成字符串，交给Angular自动处理编码即可，不需要额外调用encodeURI：

// 注意：你的示例对象有重复的foo键，JS会自动覆盖，这里改成合法的键名
const fooArray = [{text: 'bar', isEnabled: false}, {text: 'baz', isEnabled: true}];

// 如果是HTTP请求参数
const params = new HttpParams().set('fooParam', JSON.stringify(fooArray));
// 发起请求时带上这个params

// 如果是路由跳转的查询参数
this.router.navigate(['/target-page'], {
  queryParams: {
    fooParam: JSON.stringify(fooArray)
  }
});

2. 解析参数时：先解码再JSON解析

因为参数已经被Angular编码过一次，所以解析时只需要用decodeURIComponent解码，再用JSON.parse还原数组：

// 解析HTTP请求的参数
const fooParamStr = params.get('fooParam');
if (fooParamStr) {
  const parsedArray = JSON.parse(decodeURIComponent(fooParamStr));
  console.log('解析后的数组:', parsedArray);
}

// 解析路由的查询参数
this.route.queryParams.subscribe(queryParams => {
  const fooParamStr = queryParams['fooParam'];
  if (fooParamStr) {
    const parsedArray = JSON.parse(decodeURIComponent(fooParamStr));
    // 这里处理你的数组逻辑
  }
});

额外提醒： #

• 你示例里的{foo: 'bar', foo: false}是无效的JS对象！对象中重复的属性名会被后面的覆盖，实际只会保留{foo: false}，记得改成不同的键名（比如text和isEnabled）。
• 永远不要手动给Angular的查询参数做URI编码，框架已经帮你处理了所有标准字符的编码，双重编码只会导致解析混乱。

内容的提问来源于stack exchange，提问作者ianh11