This time I will show you how to use Angular5routingpass value, what are the precautions for using Angular5 routing to pass value, the following is a practical case, Let’s take a look.
Currently Angular has been upgraded to the stable version Angular5. This upgrade is smaller, faster and more stable! Routing can be said to be the core part of Angular or even single-page applications! In angularjs The biggest disadvantage of routing in is that it cannot be nested. This problem is solved in Angular! Routing in Angular is not only page jumps, but also one called hero list jump to hero details! In many lists, it is impossible Make a details page for each hero, so routing parameters come into play! Identify the details of that hero through the routing incoming parameters!
Now let’s explain the routing value in detail, first One way is to pass in the single value id of the official website to navigate to the details, the other is to pass in multiple data!
1. Single value pass in
['/hero', hero.id]
The above is an example from the official website
Let’s use my own example to introduce:
First is the list page, and the jump method
Copy code The code is as follows:
{{item.name}}
Then configure the routing: (The method of passing in a single value needs to be configured in the details component routing)
<ul class="items"> <li *ngFor="let hero of heroes$ | async" [class.selected]="hero.id === selectedId"> <a [routerLink]="['/hero', hero.id]"> <span class="badge">{{ hero.id }}</span>{{ hero.name }} </a> </li> </ul>
After passing in, the parameters are obtained, and the parameters are obtained in the details component's ngOnInitLife cycle ##
{ path:'listDetail/:id', component:ListDetailComponent },
Copy code The code is as follows:
{{data.name}}
I took the data here directly. You can also organize the data and put a parameter in it to simplify the html structure. Now there is A question, how to configure such multi-value incoming routing parameters? /:id/:id??? What should I do if this parameter is not fixed? In fact, this method does not require routing configuration! You only need to pass in and get Just get the data!ngOnInit() { this.route.params .subscribe((params: Params) => { this.id = params['id']; console.log(this.id); console.log('传值'); console.log(params) }) }
How to operate JS to implement a simple folding and unfolding animation
The above is the detailed content of How to use Angular5 routing to pass value. For more information, please follow other related articles on the PHP Chinese website!