How to use Angular5 routing to pass value

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]

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:

How to operate JS to implement a simple folding and unfolding animation

##How to operate JS to implement a transparency gradient 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!