Angular中如何使用分隔符添加数组形式的查询参数？

我来帮你搞定这个问题！看起来你现在是把多个筛选器ID用连字符-拼接成单个opts参数的值，但想要改成让每个ID对应opts参数的一个独立值（用&分隔）——不过先纠正个小细节：标准URL规范里，同一个参数的多值应该写成opts=1-1&opts=1-2（重复参数名），而你写的opts=1-1&1-2其实是不规范的（1-2没有参数键），后端解析时可能会出问题，所以我先给你推荐标准的实现方式，如果你确实需要那种不规范格式也会告诉你怎么做。

标准推荐方案：生成多值查询参数（Angular Router） #

假设你用的是Angular的Router，当前代码大概是这样的（把选中ID用-拼接）：

// 当前代码示例
const selectedIds = ['1-1', '1-2']; // 假设这是选中的筛选器ID数组
this.router.navigate(['/view'], {
  queryParams: {
    opts: selectedIds.join('-') // 这里用-拼接成了字符串
  }
});

要生成opts=1-1&opts=1-2这种规范的多值格式，你只需要直接把数组传给opts参数，Angular Router会自动帮你处理成重复参数名的格式：

const selectedIds = ['1-1', '1-2'];
this.router.navigate(['/view'], {
  queryParams: {
    opts: selectedIds // 直接传入数组即可
  },
  queryParamsHandling: 'merge' // 如果需要保留当前URL中已有的其他查询参数，加上这个选项
});

这样生成的URL就是符合规范的http://localhost/view/?opts=1-1&opts=1-2，后端也能轻松解析成数组形式的参数值。

如果坚持要非规范格式（不推荐） #

如果你确实需要http://localhost/view/?opts=1-1&1-2这种格式（虽然不推荐），那你需要手动拼接URL字符串，用navigateByUrl方法：

const selectedIds = ['1-1', '1-2'];
const targetUrl = `/view/?opts=${selectedIds.join('&')}`;
this.router.navigateByUrl(targetUrl);

但再次提醒：这种格式不符合URL的键值对规范，大部分后端框架无法正确解析1-2这个无键的参数，可能导致筛选逻辑出错，所以优先选择第一种方案。

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