Angular中使用queryParams传递对象/数组显示[Object Object]问题求助

问题根源 #

URL查询参数（queryParams）仅支持字符串类型，直接传递对象或数组时，Angular会自动调用其toString()方法，导致对象被转为[object Object]，数组则变为元素的字符串拼接结果，最终接收端只能拿到这些无意义的字符串。

解决步骤 #

1. 发送组件：序列化对象为JSON字符串 #

修改showFull方法，使用JSON.stringify()将对象转为字符串后再传递：

constructor(... private route: Router) { }

showFull(song: any) {
  console.log(song);
  this.route.navigate(['song'], { 
    queryParams: { song: JSON.stringify(song) } 
  });
}

2. 接收组件：解析JSON字符串还原对象 #

在订阅queryParams时，用JSON.parse()将字符串转回原对象：

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
  this.route.queryParams.subscribe((params: any) => {
    if (params.song) {
      const song = JSON.parse(params.song);
      console.log(song);
    }
  });
}

额外注意事项 #

• 若对象包含特殊字符（如斜杠、双引号），需配合编码避免URL解析错误：

  // 发送端编码
  queryParams: { song: encodeURIComponent(JSON.stringify(song)) }
  // 接收端解码
  const song = JSON.parse(decodeURIComponent(params.song));
  

• 数据量较大时，不建议使用queryParams（URL长度有限制），可改用路由状态（state）、Angular服务或RxJS Subject传递数据。

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