Angular 7 router.navigate()如何传递同名多值查询参数？

要实现传递多个同名的status参数，不能在queryParams对象中重复定义同名属性，正确的做法是将参数值设为数组形式，Angular Router会自动将其解析为多个同名键值对。

基础实现示例 #

在组件中调用router.navigate时，将status的值设置为包含多个元素的数组：

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

// 注入Router服务
constructor(private router: Router) {}

// 定义跳转方法
navigateToTargetPath() {
  this.router.navigate(['/home/path'], {
    queryParams: {
      status: [1, 5] // 用数组传递多个值
    }
  });
}

执行这段代码后，最终生成的URL就是http://localhost:4200/home/path?status=1&status=5，符合需求。

保留现有Query参数（可选） #

如果需要保留当前页面已有的其他Query参数，可添加queryParamsHandling: 'merge'配置：

this.router.navigate(['/home/path'], {
  queryParams: { status: [1, 5] },
  queryParamsHandling: 'merge'
});

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