A brief discussion on how to communicate between Angular parent and child components

This article will take you to understand the component communication in Angular, and introduce the methods of parent component communicating to child components, and child components communicating to parent components. I hope it will be helpful to everyone!

Component communication

The component is completely independent, so the data between each other will not be shared. If you want to share data between components, you must Implement communication between components. [Related tutorial recommendations: "angular tutorial"]

Communication between components

• ##Communication from parent component to child component

• Subcomponent communicates with parent component

ng6 In order to achieve communication between components, throughput is provided: Input, Output

The parent component communicates with the child component

ng6 is implemented based on ts, so the communication data must define the type (understand the internal structure, allocate memory space)

The parent component communicates with the child component For component communication, the sub-component is the receiver, so the Input throughput is used

The communication from the parent component to the sub-component is divided into 6 steps

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

Second step Define the data model class (if the data is very Simple, you can omit this step)

You can also use the ng directive to define a model class

ng class 类名

Naming convention for model classes: We can define it as a .model.ts file. You can also place the file directly in the models directory and define it as a .ts file

The third step In the sub-component, introduce the model class

The fourth step Step In the subcomponent, introduce the throughput Input

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

• The first way is to receive data through the Input throughput annotation class

@Input() 数据名称: 模型类;

• The second way is to receive data through the annotation meta-information inputs of the component

In the annotation class: inputs:

[Attribute data]

In the component:

Attribute data: Model class;

Step 6 Use data. Since the data is added to the component itself, it can be used either in the component or in the template.

Example:

// 4 引入吞吐器
import { Component, OnInit, Input } from '@angular/core';
// 3 引入模型类
import { Data } from '../../models/data';
@Component({
    selector: 'app-inputs',
    templateUrl: './inputs.component.html',
    styleUrls: ['./inputs.component.css'],
    // 5 通过元信息接收
    inputs: ['color', 'data']
})
export class InputsComponent implements OnInit {
    // 5 接收数据
    // @Input() data: Data;
    // @Input() color: string;
    // 声明类型
    data: Data;
    color: string;
    constructor() {
        // 6 组件中使用
        console.log(this)
    }
    ngOnInit() {
    }
}

Communication between child components and parent components

The communication between child components and parent components is based on custom events. For sub-components, it is the publisher, so use the Ouput throughputer

There are six steps to implement communication between sub-components and parent components

The first step In the parent component template, simulate DOM events, bind the parent component method to the child component element, use () syntax sugar

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

In order to pass data, add $event

The second step In the subcomponent, introduce the throughput Output

The third step In the sub-component, introduce the EventEmitter event module

Step 4 There are two ways to create event objects for the sub-component

• The first way Register through the Output throughputer

@Output() 属性名称 = new EventEmitter()

• The second type can also be received through the meta-information outputs of the annotation

In the annotation In, register attributes outputs:

[Attribute name]

In component, create event object

Attribute name = new EventEmitter()

Step 5 In the child component, publish the message through the emit method of the event object, and the parameter is the passed data

Step 6 In the parent component, receive it through the parent component method. Data passed by subcomponents

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'app-outputs',
    templateUrl: './outputs.component.html',
    styleUrls: ['./outputs.component.css'],
    // 元信息注册事件对象
    outputs: ['sendMessage']
})
export class OutputsComponent implements OnInit {
    // 4 注册事件对象
    // @Output() sendMessage = new EventEmitter();
    // 实例化
    sendMessage = new EventEmitter();
    constructor() { }
    ngOnInit() {
    }
    // 事件回调函数
    demo() {
        // console.log(111, this)
        // 5 点击按钮的时候，向父组件发布消息
        this.sendMessage.emit({
            msg: 'hello菜鸟',
            color: 'red'
        })
    }
}

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of A brief discussion on how to communicate between Angular parent and child components. For more information, please follow other related articles on the PHP Chinese website!