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

The parent component communicates with the child component

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)

ng class 类名

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() 数据名称: 模型类;

Copy after login

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

[Attribute data]

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.

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

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

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()

Copy after login

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

[Attribute name]

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'
        })
    }
}

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!