I am looking for the best way to transition from one component to another while passing data along with it.
Below is an example of how I currently achieve this:
this.router.navigate(['some-component', { name: 'Some Name' }]);
In SomeComponent, I retrieve the route parameters using the following code:
this.route.params.subscribe(params => {
//assign it to a member variable in the component, like
this.name = (JSON.parse(params))['name'];
});
Although this method works, it lacks robustness as the URL structure appears messy and does not retain state after a page refresh.
I would prefer to avoid using route parameters altogether.
What would be the correct approach to navigate to SomeComponent and pass a value that can be accessed internally and bound to a variable, such as this.name?
Note that these two components are not related in a parent/child hierarchy.