Angular router.navigate 使用数组作为 queryParams 列表答案

【问题标题】：Angular router.navigate use array as list of queryParamsAngular router.navigate 使用数组作为 queryParams 列表
【发布时间】：2019-07-20 01:07:10
【问题描述】：

我在使用表单构建 queryParams 对象后进行导航：

options {
    ...
    words: (4) ["chuck", "norris", "vs", "keanu", "reeves"]
}

然后navigate 使用该对象更新 URL 的参数：

this.router.navigate(['/search'], { queryParams: options });

每个条目的 URL words 参数是重复的，如下所示：

/search?words=chuck&words=norris&words=vs&words=keanu&words=reeves

我们如何将数组正确地传入queryParams？

链接： angular.io/api/router/Router#navigate alligator.io/angular/query-parameters

queryParamsHandling 对此没有影响。这是StackBlitz 的复制品。

【问题讨论】：

一个技巧是对你传递的数据进行 JSON 字符串化并使用 JSON.parse 检索它
words 重复有什么问题？它可以像这样工作 :) 来自en.wikipedia.org/wiki/Query_string#Structure ：“虽然没有明确的标准，但大多数 Web 框架允许将多个值与单个字段相关联（例如 field1=value1&field1=value2&field2=value3）。”另一个好处是您将在角度路由器状态内自动拥有一组查询参数。所以你不必手动解析查询字符串。
我个人从未见过多次使用相同参数的 URL，每个值对应一个。

标签： angular query-parameters

【解决方案1】：

您的做法是正确的，只需在您的 /search 组件中使用 params.getAll：

words: string[];

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.route.queryParamMap.subscribe(params => this.words = params.getAll('words'));
}

更新：stackblitz 上的工作示例：angular-query-params-pass-array

【讨论】：

感谢@Gais Zaher，但我不想获取参数。在建立要设置的对象后，我正在尝试设置参数。
@BenRacicot 所以问题是words 参数被复制了？如果是这样，我认为没有问题，这是在查询参数中传递数组的正确方法。