Angular 2 pass array to router queryString

Question

I would like to pass an array ids: [1, 2, 3] to router query string like this: http://...some-url?ids=1&ids=2&ids=3, but when I try to use

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

the result is http://...some-url/some-route?ids=1%2C2%2C3

Is there a way to add query params with the same key?

Have you tried `this.router.navigate(['/some-route'], queryParams );` (remove the `{}`) — Igor, Feb 08 '17 at 10:45
I shouldn't do this, because of router navigate parameters: `navigate(commands: any[], extras?: NavigationExtras)`, and `extras` is object witch can contains queryParams object. I can write `this.router.navigate(['/some-route'], { queryParams: {ids: [1, 2, 3]} });`, but I like short form. (I tried `this.router.navigate(['/some-route'], queryParams )`, it doesn't work) — qwe asd, Feb 08 '17 at 10:55
@qweasd Please, see this one. https://stackoverflow.com/questions/41264722/how-to-handle-multiple-queryparams-in-angular2 It is solved there. — Skyware, Sep 08 '17 at 15:12

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

Looks like there is a bug in the router. Please, check this answer: https://stackoverflow.com/a/42505212/7634393

edited May 23 '17 at 12:09

Community

answered Feb 28 '17 at 10:04

Alexander Pisarev

score 0 · Answer 2 · answered Feb 08 '17 at 13:57

0

router.navigate is waiting for a named 'queryParams' value.

So, this should work.

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

Or,

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

answered Feb 08 '17 at 13:57

Jan

This works the same as my case: generated params like this: `ids=1%2C2%2C3`. And you can write `this.router.navigate(['/some-route'], { queryParams });` it is property shorthand feature and typescript support this. – qwe asd Feb 08 '17 at 15:32

2 Answers2