Send data through routing paths in Angular

angular routing angular-router
Motomine picture Motomine · Jul 1, 2017 · Viewed 248.5k times · Source

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working:

this.router.navigate(["heroes"], {some-data: "othrData"})

because some-data is not a valid parameter. How can I do that? I don't want to send the parameter with queryParams.

Answer

DeborahK picture DeborahK · Jul 2, 2017

There is a lot of confusion on this topic because there are so many different ways to do it.

Here are the appropriate types used in the following screen shots:

private route: ActivatedRoute
private router: Router

1) Required Routing Parameters:

enter image description here

2) Route Optional Parameters:

enter image description here

3) Route Query Parameters:

enter image description here

4) You can use a service to pass data from one component to another without using route parameters at all.

For an example see: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

I have a plunker of this here: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Related questions

Passive Link in Angular 2 - <a href=""> equivalent

In Angular 1.x I can do the following to create a link which does basically nothing: <a href="">My Link</a> But the same tag navigates to the app base in Angular 2. What is the equivalent …

Read More
How to run a function when a route changes in angular?

I want to change a certain heading according to the current url in Angular. So component.ts looks like this: import {Router} from '@angular/router'; //code public name: string constructor( public router: Router ) {} getName() { if(this.router.url === "/some_…

Read More
Angular2 Routing with Hashtag to page anchor

I wish to add some links on my Angular2 page, that when click, will jump to specific positions within that page, like what normal hashtags do. So the links would be something like /users/123#userInfo /users/123#userPhoto /users/123#userLikes etc. …

Read More