Angular router.navigate使用数组作为queryParams的列表 [英] Angular router.navigate use array as list of queryParams

问题描述

在构建带有以下形式的queryParams对象之后，我正在导航:

Im navigating after building up a queryParams object with a form:

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

然后对该对象进行 navigate 来更新URL的参数:

Then navigate with that object to update the URL's parameters:

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

对于每个条目，URL words 参数都是重复的，如下所示:

The URL words param is duplicated for each entry like this:

/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 复制.

queryParamsHandling has no affect on this. Here is a StackBlitz repro.

推荐答案

您正在使用正确的方法，只需使用 params.getAll 在您的/search 组件中:

You're doing it the correct way, just use params.getAll in your /search component:

words: string[];

constructor(private route: ActivatedRoute) {
}

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

---

更新:关于stackblitz的工作示例:角度查询参数传递数组

这篇关于Angular router.navigate使用数组作为queryParams的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！