Home Web Front-end JS Tutorial Summary of Angular5 routing value transfer methods

Summary of Angular5 routing value transfer methods

May 15, 2018 am 09:11 AM
Summarize routing

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

1

['/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)

1

2

3

4

5

6

7

8

 <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 ##

1

2

3

4

{

  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!

1

2

3

4

5

6

7

8

9

 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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1229
24
Summarize the usage of system() function in Linux system Summarize the usage of system() function in Linux system Feb 23, 2024 pm 06:45 PM

Summary of the system() function under Linux In the Linux system, the system() function is a very commonly used function, which can be used to execute command line commands. This article will introduce the system() function in detail and provide some specific code examples. 1. Basic usage of the system() function. The declaration of the system() function is as follows: intsystem(constchar*command); where the command parameter is a character.

How to implement API routing in the Slim framework How to implement API routing in the Slim framework Aug 02, 2023 pm 05:13 PM

How to implement API routing in the Slim framework Slim is a lightweight PHP micro-framework that provides a simple and flexible way to build web applications. One of the main features is the implementation of API routing, allowing us to map different requests to corresponding handlers. This article will introduce how to implement API routing in the Slim framework and provide some code examples. First, we need to install the Slim framework. The latest version of Slim can be installed through Composer. Open a terminal and

Java Apache Camel: Building a flexible and efficient service-oriented architecture Java Apache Camel: Building a flexible and efficient service-oriented architecture Feb 19, 2024 pm 04:12 PM

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

How to use routing in ThinkPHP6 How to use routing in ThinkPHP6 Jun 20, 2023 pm 07:54 PM

ThinkPHP6 is a powerful PHP framework with convenient routing functions that can easily implement URL routing configuration; at the same time, ThinkPHP6 also supports a variety of routing modes, such as GET, POST, PUT, DELETE, etc. This article will introduce how to use ThinkPHP6 for routing configuration. 1. ThinkPHP6 routing mode GET method: The GET method is a method used to obtain data and is often used for page display. In ThinkPHP6, you can use the following

How to use routing to customize page switching animation effects in a Vue project? How to use routing to customize page switching animation effects in a Vue project? Jul 21, 2023 pm 02:37 PM

How to use routing to customize page switching animation effects in a Vue project? Introduction: In the Vue project, routing is one of the functions we often use. Switching between pages can be achieved through routing, providing a good user experience. In order to make page switching more vivid, we can achieve it by customizing animation effects. This article will introduce how to use routing to customize the page switching animation effect in the Vue project. Create a Vue project First, we need to create a Vue project. You can use VueCLI to quickly build

Implementation method and experience summary of flexibly configuring routing rules in PHP Implementation method and experience summary of flexibly configuring routing rules in PHP Oct 15, 2023 pm 03:43 PM

Implementation method and experience summary of flexible configuration of routing rules in PHP Introduction: In Web development, routing rules are a very important part, which determines the corresponding relationship between URL and specific PHP scripts. In the traditional development method, we usually configure various URL rules in the routing file, and then map the URL to the corresponding script path. However, as the complexity of the project increases and business requirements change, it will become very cumbersome and inflexible if each URL needs to be configured manually. So, how to implement in PHP

Use JavaScript functions to implement web page navigation and routing Use JavaScript functions to implement web page navigation and routing Nov 04, 2023 am 09:46 AM

In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page

How to use routing to implement page jump in Vue? How to use routing to implement page jump in Vue? Jul 21, 2023 am 08:33 AM

How to use routing to implement page jump in Vue? With the continuous development of front-end development technology, Vue.js has become one of the most popular front-end frameworks. In Vue development, page jump is an essential part. Vue provides VueRouter to manage application routing, and seamless switching between pages can be achieved through routing. This article will introduce how to use routing to implement page jumps in Vue, with code examples. First, install the vue-router plugin in the Vue project.

See all articles