At present, Angular has been upgraded to the stable version of Angular5, which is smaller, faster and more stable. The routing can be said to be the core part of Angular or even a single-page application! The biggest disadvantage of routing in angularjs is that it cannot nest routes. This problem is solved in Angular! In Angular, routing is not just page redirection, but also a hero list jumps hero details! In many lists, it is impossible to make a detailed page for each hero, so the routing parameters play a role! Identify the details of that hero through the route parameters!
Now, we will explain the route value in detail. First, one way is to navigate the official website to the single-value id in the details, and the other is to pass it in multiple data!
1. Single value pass
['/hero', ]
<ul class="items">
<li *ngFor="let hero of heroes$ | async"
[]=" === selectedId">
<a [routerLink]="['/hero', ]">
<span class="badge">{{ }}</span>{{ }}
</a>
</li>
</ul>
The above is an official website example
Let's use my own example to introduce it:
First of all, the list page and the jump method
Then configure the routing: (The single-value incoming method requires the detailed component routing configuration)
{
path:'listDetail/:id',
component:ListDetailComponent
},
After passing in, the parameters are obtained, and the parameters are obtained in the ngOnInit life cycle of the detailed component
ngOnInit() {
.subscribe((params: Params) => {
= params['id'];
();
('Pass value');
(params)
})
}
2. We need to transmit multiple data in our usual complex business scenarios. What should we do at this time? At this time, we used queryParams
I took the data here directly. You can organize the data and put one parameter on it to simplify the html structure. Now there is a problem. How to configure the route parameters for multiple values passed in? /:id/:id??? What should I do if my parameter is not fixed? In fact, this method does not require routing configuration! You only need to pass in and retrieve the data!
ngOnInit() {
.subscribe((params: Params) => {
= params['id'];
= params['state'];
(params)
();
();
})
}
The above are two ways to pass values in Angular routes! I hope it will be helpful to everyone! I also hope everyone supports me.