Angular5 study notes routing communication

First, in the routing dictionary, add: /: id to the component that receives the value

In a component that sends a value, there are several ways to send a value.

Type 1: <a routerLink="/detail/1">News Details 1</a>

Using routerLink, add the value to be passed after the jumped component

 

Then in the component that receives the value, that is, the detail component, introduce ActivatedRoute and instantiate it

Then you need to use route to get the passed value

 

 

1. Jump/login with the root route

1	this .router.navigate([ 'login' ]);

2. Set relativeTo to jump relative to the current route, route is an instance of ActivatedRoute, and use needs to import ActivatedRoute

 

1	this .router.navigate([ 'login' , 1],{relativeTo: route});

3. Route parameter /login?name=1

 

1	this .router.navigate([ 'login' , 1],{ queryParams: { name: 1 } });

4. The default value of preserveQueryParams is false, set to true to preserve the query parameters in the previous route /login?name=1 to /home?name=1

 

1	this .router.navigate([ 'home' ], { preserveQueryParams: true });

5. Anchor jump in routing /home#top

 

1	this .router.navigate([ 'home' ],{ fragment: 'top' });

6. The default value of preserveFragment is false, set to true, and the anchor point in the previous route is preserved /home#top to /role#top

 

1	this .router.navigate([ '/role' ], { preserveFragment: true });

7.skipLocationChange defaults to false, set to true, the url in the browser will remain unchanged when the route jumps, but the incoming parameters are still valid

?

1	this .router.navigate([ '/home' ], { skipLocationChange: true });

8.ReplaceUrl defaults to true, set to false, the route will not jump

?

1	this .router.navigate([ '/home' ], { replaceUrl: true });