Home > Web Front-end > JS Tutorial > body text

Summary of Angular5 routing value transfer methods

php中世界最好的语言
Release: 2018-05-15 09:11:15
Original
1808 people have browsed it

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]
Copy after login
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>
Copy after login

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 after login
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)
   })
 }
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!