Angular 2将数组传递给路由器queryString答案

【问题标题】：Angular 2 pass array to router queryStringAngular 2将数组传递给路由器queryString
【发布时间】：2021-04-30 23:35:30
【问题描述】：

我想将数组ids: [1, 2, 3] 传递给路由器查询字符串，如下所示：http://...some-url?ids=1&ids=2&ids=3，但是当我尝试使用时

const queryParams = { ids: [1, 2, 3] };
this.router.navigate(['/some-route'], { queryParams });

结果是http://...some-url/some-route?ids=1%2C2%2C3

有没有办法添加具有相同键的查询参数？

【问题讨论】：

你试过this.router.navigate(['/some-route'], queryParams );（去掉{}）
我不应该这样做，因为路由器导航参数：navigate(commands: any[], extras?: NavigationExtras)，而extras 是可以包含 queryParams 对象的对象。我可以写this.router.navigate(['/some-route'], { queryParams: {ids: [1, 2, 3]} });，但我喜欢简短的形式。（我试过this.router.navigate(['/some-route'], queryParams )，不行）
@qweasd 请看这个。 stackoverflow.com/questions/41264722/…那里解决了。

【解决方案1】：

看起来路由器中存在错误。请检查这个答案：https://stackoverflow.com/a/42505212/7634393

【讨论】：

【解决方案2】：

router.navigate 正在等待命名的“queryParams”值。

所以，这应该可行。

const queryParams = { ids: [1, 2, 3] };
this.router.navigate(['/some-route'], { queryParams: queryParams });

或者，

const extras = { queryParams: { ids: [1, 2, 3] }};
this.router.navigate(['/some-route'], extras);

【讨论】：

这与我的情况相同：生成的参数如下：ids=1%2C2%2C3。你可以写this.router.navigate(['/some-route'], { queryParams });这是属性速记功能，打字稿支持这个。