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

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!

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

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

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

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