Angular 2, How to pass an array to the Router using queryParams

Question

Is there some way to get this kind of url in Angular 2?

http://www.domain.com/the-route?param[]=value1&param[]=value2&param[]=value3

I'm trying to do it like it should be, using queryParams with the Router, but as queryParams accepts an Object I can't do this:

this.router.navigate(['/the-route'], queryParams: { 'param[]': 'value1', 'param[]': 'value2', 'param[]': 'value3' });

Because, of course, I can't use the same name (param[]) several times in the Object

I'm struggling how to do this, but can't find a way

I've seen this post: Angular 2 pass array to router queryString. But there are no correct answers

Answer 1

There is no possibility to do this right now.

If You trace the router code yourself begining from router#navigate(), You can see that create_url_tree#tree() function builds a tree with stringified queryParams:

function tree(oldSegmentGroup, newSegmentGroup, urlTree, queryParams, fragment) {
  if (urlTree.root === oldSegmentGroup) {
    return new UrlTree(newSegmentGroup, stringify(queryParams), fragment);
  }
  return new UrlTree(replaceSegment(urlTree.root, oldSegmentGroup, newSegmentGroup), stringify(queryParams), fragment);
}

And stringify() does all the dirty work:

function stringify(params) {
  var /** @type {?} */ res = {};
  forEach(params, function (v, k) { return res[k] = "" + v; });
  return res;
}

Result of concatenation of string and array is a comma-delimited string.

There are a couple of issues about multiple query parameters with the same name, that was fixed in https://github.com/angular/angular/pull/11373. As You can see, modified url_tree#serializeQueryParams() does exactly what You need. But the problem is that serialization takes place a lot later as the tree will be built.

It seems that this is a bug in create_url_tree#tree() - it shouldn't stringify query params, because it is the area of responsibility of url_tree#serializeQueryParams(). I've removed call to stringify() locally and everything started working as it should.

As workaround You can stringify each query parameter manually with JSON.stringify(queryParamArray) before sending it to router#naviagate() and parse it with JSON.parse(param) in route.queryParams.subscribe(). URL looks horrible, but now it's the only way to pass arrays.

UPDATE: I created the issue in the angular repository: https://github.com/angular/angular/issues/14796

Answer 2

Yo can do like this:

let object1 = {
  'name':'Charles',
  'age':21,
}

let params = {
  'student':JSON.stringify(object1),
  'carreer':'law',
}

this.router.navigate(['/the-route'], {queryParams: params});

and when you receive the 'student' param you just PARSE IT like this:

let student = JSON.parse (params['student']);

and that's it!

Answer 3

you can use the navigation extras hope this might help you:

import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';

function(){
 let extra: any = [];


  let navigationExtras: NavigationExtras = {
      queryParams:extra
    };

 this.router.navigate(['/Questions'], navigationExtras);
}

Answer 4

You can pass them as items in the router commands array:

[routerLink]="['/Questions', {queryParams: {id:1234, pageid:0}} ]"

See also https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Answer 5

Not a lot related to the question, but might help people who come to this question from Google and are looking about how to pass an array to routerLink; so this answer might help them.

consider this example:

<a [routerLink]="['news', newsId, newsTitle]">

the first item (news) is a text because it's inside quotation marks, and other two items are variables that might be inside a ngFor