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
– Igor, Commented Feb 8, 2017 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
– qwe asd, Commented Feb 8, 2017 at 10:55
@qweasd Please, see this one. stackoverflow.com/questions/41264722/… It is solved there. — Skyware
– Skyware, Commented Sep 8, 2017 at 15:12

Community · Accepted Answer · 2017-05-23 12:09:51Z

1

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 28, 2017 at 10:04

Alexander Pisarev

461 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jan · Accepted Answer · 2017-02-08 13:57:50Z

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 8, 2017 at 13:57

Jan

3302 silver badges8 bronze badges

1 Comment

qwe asd Over a year ago

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.

Collectives™ on Stack Overflow

Angular 2 pass array to router queryString

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related