Angular Passing Data Between Routes

Question

I have a little problem using routes in angular 4. You know, when I am trying to pass data from a component to another using navigate(\'root\', data), I just re

Answer 1

When you pass an object as a route parameter, it causes to call toString on that object and you get the result [object Object] from the object.

const obj = {};
console.log(obj.toString());

If you want to pass complex type, you need to stringify it to a string and pass as a string. After when you get it, you need again to parse into an object.

this.route.navigate(['/requests/fill', JSON.stringify(data)]);

and access later

const key: Products = JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Answer 2

You can't pass list of data in params

So you need convert to string the list of objects then pass

navigate('root',   JSON.stringify(data))

Then do parsing while get this

const key: Products =JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Answer 3

In the current version this is now available in @angular/router.

Angular 7.2 introduces route state to NavigationExtras, which takes an object literal similar to queryParams, etc.

The state can be set imperatively:

this.router.navigate(['example'], { 
  state: { example: 'data' } 
});

or declaratively:

<a routerLink="/example" [state]="{ example: 'data' }">
  Hello World
</a>

And read in a top-level component using:

this.router.getCurrentNavigation().extras.state;

or within child components using:

window.history.state

Added a working example of it being used on StackBlitz