angular2 RouteParams, serialization, and complex objects or arrays

Question

I am trying to pass an object as a RouteParam

let params = { account: 'revenue', page: 3, conditions: [{foo: 'john'}, {foo: 'kelly'}] // <-- Complex object } this._router.navigate(['Journal', params])

but I am getting a URL like

http://localhost:3000/journal/revenue/3?conditions=[object%20Object],[object%20Object]

IIRC, angular1 supported this type of serialization back and forth using JQuery's $.param (I might be wrong)

Is there a way to achieve similar in angular2?

Answer 1

Because such parameters are passed within the URL, you could convert them as string using for example JSON.stringify and convert them to object from route params using JSON.parse when you want to access them.

let params = { 
  account: 'revenue', 
  page: 3, 
  conditions: JSON.stringify("[{foo: 'john'}, {foo: 'kelly'}]") 
};
this._router.navigate(['Journal', params]);

and

constructor(params:RouteParams) {
  var conditions = JSON.parse(params.get('conditions'));
}

The other approach is to use a shared service. You set the object into a property of this service before calling the route and get it from the component corresponding to the route after it was activated. You can notice that a shared service needs to be defined when bootstrapping your application to be able to share a single instance for the whole application:

bootstrap(AppComponent, [ SharedService ]);

See this question for more details:

• Angular 2 passing object via route params possible?