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
![](https://images2018.cnblogs.com/blog/1075533/201804/1075533-20180428105243820-294202397.png)
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
});
|