Angular能否将数组作为查询参数传递并用getAll()方法获取

完全可以直接这么实现，这是Angular传递、获取多值查询参数的标准方案。

你写的传参逻辑是正确的，Angular路由会自动将数组类型的查询参数，序列化为多个同名参数拼接在URL中，最终生成的URL格式为/item?item=id1&item=id2&item=id3。

接收参数时通过queryParamMap的getAll()方法即可拿到完整的参数数组，示例代码如下：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 场景1：路由参数仅在页面初始化时获取一次，用快照即可
  const itemIdList = this.route.snapshot.queryParamMap.getAll('item');
  // getAll返回值为string数组，若需要数值类型自行转换即可
  const numIdList = itemIdList.map(id => Number(id));

  // 场景2：同一路由下查询参数会动态变化，用订阅方式实时获取
  this.route.queryParamMap.subscribe(paramMap => {
    const dynamicItemIds = paramMap.getAll('item');
    // 后续业务逻辑
  });
}

注意事项 #

• getAll()方法永远返回数组：即使查询参数只有1个值，也会返回长度为1的数组；如果没有对应参数则返回空数组，无需额外做类型兼容处理。
• 不要直接通过queryParams对象取值：如果参数只有1个值时，this.route.snapshot.queryParams['item']会直接返回字符串而非数组，会导致类型异常。

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