Repeated query parameter in Angular 2 Routing

Question

I am converting an existing application over to Angular 2 and have a requirement where a query parameter can appear zero or more (i.e. repeated) times. An example would be a url that has multiple parameters for sorting (as in #/results/data;sort=column1;sort=column2) or when calling Solr instances and specifying multiple facet filtering (https://cwiki.apache.org/confluence/display/solr/Common+Query+Parameters#CommonQueryParameters-Thefq(FilterQuery)Parameter). Typically, the receiving endpoint recognizes those repeated parameters and presents them as an array.

How can I do this with Angular 2 routing? I am using RC4 with the 3.0-beta-2 router. When I subscribe to the ActivatedRoute and look at the params, only the last repeated value is returned, yet I know the full url is being passed in since Location.path() shows what was typed.

For example, given the following url

https://localhost:44300/#/search;fq=efg:456;q=xyz;fq=abc

console.log(this.location.path(false)); shows /search;fq=efg:456;q=xyz;fq=abc

but only Object {fq: "abc", q: "xyz"} is given back with

this.route.params.subscribe(params => {
   console.log(params);
});

Günter Zöchbauer · Accepted Answer · 2017-03-16 15:35:50Z

2

update

this is supported since a while already.

orginal

This is currently not supported.
There is an open issue to get support for multiple values eventually.

https://github.com/angular/angular/issues/9477

edited Mar 16, 2017 at 15:35

answered Aug 9, 2016 at 9:30

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

Jason Over a year ago

Thank you for the quick response.

Günter Zöchbauer Over a year ago

@jcroll great! Thanks for the feedback

Martin Probst · Accepted Answer · 2017-03-06 08:36:40Z

1

Update: this should now be fixed.

this.route.params.subscribe(params => {
   // assuming ?foo=a&foo=b&bar=c
   // should return an object {'foo': ['a', 'b'], 'bar': 'c'}
   console.log(params);
});

answered Mar 6, 2017 at 8:36

Martin Probst

9,6816 gold badges34 silver badges33 bronze badges

Comments

Lucas Tétreault · Accepted Answer · 2016-08-09 04:32:25Z

0

For passing complex data between views I think you would be better suited using a service injected into each of the components rather than query parameters.

answered Aug 9, 2016 at 4:32

Lucas Tétreault

9535 silver badges15 bronze badges

1 Comment

Jason Over a year ago

the posting has nothing to do with passing data between views. It has to do with building a url and passing parameters into a single view where the parameter names can be repeated.

Collectives™ on Stack Overflow

Repeated query parameter in Angular 2 Routing

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related