Jason
Jason

Reputation: 2887

Repeated query parameter in Angular 2 Routing

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);
});

Upvotes: 3

Views: 1326

Answers (3)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657248

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

Upvotes: 2

Martin Probst
Martin Probst

Reputation: 9641

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);
});

Upvotes: 1

Lucas Tétreault
Lucas Tétreault

Reputation: 953

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.

Upvotes: 0

Related Questions