Shulou(Shulou.com)06/03 Report--

Editor to share with you how to communicate between Angular father and son components, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Component communication

Components are complete and independent, so the data between them will not be shared. If you want to share data between components, you must realize the communication between components. [recommended for related tutorials: "angular tutorial"]

Communication between components

The parent component communicates to the child component

The child component communicates with the parent component

In order to achieve communication between components, ng6 provides a throughput: Input,Output

The parent component communicates to the child component

Ng6 is based on ts implementation, so the type of data to be communicated is defined (understand the internal structure, allocate memory space)

The parent component communicates to the child component, and the child component is the receiver, so use the Input throughput

There are 6 steps to realize the communication between the parent component and the child component.

In the first step, in the parent component template, you pass data for the child component. If the data is dynamically variable, you can use [] syntax sugar.

The second step defines the data model class (if the data is very simple, you can omit this step)

You can also use ng directives to define model classes

Ng class class name

Naming conventions for model classes: we can define them as .model.ts files. You can also put the file directly in the models directory and define it as a .ts file

In the third step, the model class is introduced into the subcomponents.

In the fourth step, Input is introduced into the sub-components.

The fifth step is to receive data through the throughput. There are two ways.

The first way to annotate classes through Input throughput is to receive data.

@ Input () data name: model class

The second method can also be received through the component's annotation meta-information inputs.

In the annotation class: inputs: [attribute data]

Component: attribute data: model class

The sixth step is to use the data, which can be used both in the component and in the template because the data is added to the component itself

For example:

/ / 4 introduce throughput import {Component, OnInit, Input} from'@ angular/core';// 3 and model class import {Data} from'.. /.. / models/data' @ Component ({selector: 'app-inputs', templateUrl:'. / inputs.component.html', styleUrls: ['. / inputs.component.css'], / / 5 receive inputs through meta-information: ['color',' data']}) export class InputsComponent implements OnInit {/ / 5 receive data / / @ Input () data: Data; / / @ Input () color: string; / / declare type data: Data Color: use console.log (this)} ngOnInit () {}} in string; constructor () {/ / 6 components

The child component communicates with the parent component

The communication between the child component and the parent component is based on custom events. For subcomponents, it is the publisher, so use the Ouput throughput

There are six steps to realize the communication between the child component and the parent component.

The first step is to simulate the DOM event in the parent component template and bind the parent component method for the child component element, using the () syntax sugar

For example, (demo) = "dealDemo ($event)"

To pass the data, add $event

The second step is to introduce the throughput Output into the subcomponents.

The third step is to introduce the EventEmitter event module into the subcomponents.

The fourth step is to create event objects for subcomponents in two ways

The first is registered through Output Throughput

@ Output () attribute name = new EventEmitter ()

The second can also be received through the annotated meta-information outputs.

In the note, register the attribute outputs: [attribute name]

Component, create event object property name = new EventEmitter ()

In the fifth step, the sub-component publishes the message through the emit method of the event object, and the parameter is the passed data.

The sixth step is to receive the data passed by the child component through the parent component method in the parent component.

Import {Component, OnInit, Output, EventEmitter} from'@ angular/core';@Component ({selector: 'app-outputs', templateUrl:'. / outputs.component.html', styleUrls: ['. / outputs.component.css'], / / meta-information register event object outputs: ['sendMessage']}) export class OutputsComponent implements OnInit {/ / 4 register event object / / @ Output () sendMessage = new EventEmitter () / / instantiate sendMessage = new EventEmitter () Constructor () {} ngOnInit () {} / / event callback function demo () {/ / console.log (11111l, this) / / 5 when the button is clicked Post a message to the parent component this.sendMessage.emit ({msg: 'hello rookie', color: 'red'})}} above is all the content of the article "how to communicate between Angular parent and son components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.