Angular如何传递数组作为查询参数并使用getAll方法获取

问题原因 #

你原来的reduce写法存在逻辑错误：每次迭代都会直接覆盖item字段的值，最终只能拿到最后一个选中项的id，无法生成数组格式的参数。

正确实现 #

构造查询参数并跳转 #

直接用map提取所有选中项的id生成数组，赋值给item字段即可：

// 提取所有选中项的id生成数组
const itemIdArr = selectedItems.map(item => item.id);
const queryParams = {
  item: itemIdArr
};

// 路由跳转传参
this.router.navigate(['/goToItems'], {
  queryParams,
  // 可选配置：如果需要保留页面现有查询参数，添加下面这行
  // queryParamsHandling: 'merge'
});

此时路由会自动将参数序列化为标准HTTP格式：/goToItems?item=1&item=2&item=3&item=4&item=5

目标页面接收参数 #

直接调用getAll()方法即可拿到数组格式的参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 直接获取数组格式的item参数（默认是字符串类型）
  const itemIds = this.route.snapshot.queryParamMap.getAll('item');
  // 如果需要数字类型的id，自行转换即可
  const numberIdArr = itemIds.map(id => Number(id));
}

可选方案（JSON序列化传参） #

如果你需要将整个数组作为单条查询参数传递，可以手动做序列化处理：

// 传参时序列化
const queryParams = {
  item: JSON.stringify(selectedItems.map(item => item.id))
};
this.router.navigate(['/goToItems'], { queryParams });

// 接收时反序列化
const itemIds = JSON.parse(this.route.snapshot.queryParamMap.get('item') || '[]');

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