Summary of Angular5 routing value transfer methods

This time I will bring you a summary of Angular5routingvalue-passing methods, and what are the notes for Angular5 routing value-passing. 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]="[&#39;/hero&#39;, 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}}

 ngOnInit() {
  this.route.params
   .subscribe((params: Params) => {
    this.id = params['id'];
    console.log(this.id);
    console.log('传值');
    console.log(params)
   })
 }

Detailed explanation of the steps to use .vue in vscode

jQuery traversal of XML nodes and attributes implementation steps

The above is the detailed content of Summary of Angular5 routing value transfer methods. For more information, please follow other related articles on the PHP Chinese website!