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]

rrree

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
 },

2. In our usual complex business scenarios, we need to transfer multiple data, what should we do at this time? At this time we use queryParams

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)
   })
 }

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

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!