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

Question

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

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

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

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

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

/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 的重现。

Answer 1

您正在以正确的方式执行此操作，只需在组件中使用params.getAll/search即可：

words: string[];

constructor(private route: ActivatedRoute) {
}

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

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