如何在Angular中添加同名多个查询参数？仅用HTML表达式实现

仅靠纯HTML模板表达式无法实现你要的效果——Angular的queryParamsHandling: 'merge'策略在处理同名参数时，会执行覆盖操作而非追加，所以每次点击都会把tag参数替换成当前选中的单个值，无法累加生成多值的同名参数。

要实现/users?tag=One&tag=Two这种URL格式，需要结合组件类逻辑维护选中标签集合，具体方案如下：

1. 组件类维护选中状态与参数更新逻辑 #

在组件的.ts文件中定义数组存储选中标签，并实现标签切换、URL参数更新的方法：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-user-filter',
  templateUrl: './user-filter.component.html'
})
export class UserFilterComponent {
  tags = ['One', 'Two', 'Three'];
  selectedTags: string[] = [];

  constructor(private router: Router) {}

  toggleTag(tag: string): void {
    const tagIndex = this.selectedTags.indexOf(tag);
    if (tagIndex > -1) {
      // 移除已选中的标签
      this.selectedTags.splice(tagIndex, 1);
    } else {
      // 添加新选中的标签
      this.selectedTags.push(tag);
    }
    // 更新URL查询参数
    this.router.navigate([], {
      queryParams: { tag: this.selectedTags.length ? this.selectedTags : undefined },
      queryParamsHandling: 'merge'
    });
  }
}

2. 模板绑定选中状态与切换事件 #

将模板中的复选框与组件逻辑绑定，去掉原有的routerLink相关属性：

<div *ngFor="let tag of tags" class="dropdown-item mx-2">
  <input 
    class="form-check-input" 
    type="checkbox" 
    [checked]="selectedTags.includes(tag)"
    (change)="toggleTag(tag)"
  />
  {{ tag }}
</div>

原理说明 #

当queryParams传入数组类型的值（比如{ tag: ['One', 'Two'] }）时，Angular Router会自动将其解析为多个同名查询参数，最终生成tag=One&tag=Two的格式。若选中数组为空，传入undefined会自动移除该参数，保持URL简洁。

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