Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

Component communication

Components are completely independent and therefore do not share data with each other. To share data between components, communication between components must be implemented

Intercomponent communication

The parent component communicates with the child component

The child component communicates with the parent component

In order to realize communication between components, NG6 provides a swallow: Input, Output

The parent component communicates with the child component

Ng6 is implemented based on TS, so the data to be communicated needs to be typed (understand the internal structure, allocate memory space).

The parent component communicates to the child component, which is the receiver and therefore uses the Input reader

There are six steps to implement parent component to child component communication

Step 1 In the parent component template, pass data to the child component, using the [] syntax sugar if the data is dynamically variable

The second step defines the data model class (this step can be omitted if the data is very simple)

You can also define model classes using the NG directive

Ng the class name of the class

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

In the third subcomponent, introduce the model class

In the fourth subcomponent, introduce a puffer Input

The fifth step is to receive data through the swallow, and there are two ways

The first way is to receive data by annotating the class with an Input reader

@input () Data name: model class;

The second can also be received through the inputs annotation for a component

Inputs: Inputs: inputs

Component: Attribute data: model class;

The sixth step is to use the data, which is added to the component itself, so it can be used either in the component or in the template

For example:

Import {Component, OnInit, Input} from '@angular/core'; import {Component, OnInit, Input} from '@angular/core'; Import {Data} from '.. /.. /models/data'; @Component({ selector: 'app-inputs', templateUrl: './inputs.component.html', styleUrls: ['./inputs.component.css'], // inputs: ['color', 'data']}) export class InputsComponent implements OnInit {// @input () data: data; // @Input() color: string; // Declare type data: data; color: string; Console. log(this)} ngOnInit() {}}Copy the code

The child component communicates with the parent component

Child component communication to parent component is implemented based on custom events. For child components, the publisher is used, so the Ouput reader is used

There are six steps to implement child component communication to parent component

The first step is to emulate DOM events in the parent component template, binding child component elements to parent component methods using () syntax sugar

For example (demo) = “dealDemo ($event)”

To pass the data, add $event

The second step in the child component is to introduce a swallower Output

The third step introduces the EventEmitter event module in the child component

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

The first is registered through an Output swallow

@Output() = new EventEmitter()

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

In annotations, register the attribute [attribute name]

Inside the component, create an event object property name = new EventEmitter()

In the fifth sub-component, the message is posted through the EMIT method of the event object, and the parameters are the data passed

Step 6 In the parent component, through the parent component method, receive the data passed by the child component

import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-outputs', templateUrl: './outputs.component.html', styleUrls: ['./outputs.component.css'], // metadata register event object outputs: ['sendMessage']}) export class OutputsComponent implements OnInit {// 4 / @output () sendMessage = new EventEmitter(); // Instantiate sendMessage = new EventEmitter(); Constructor () {// console. Log () {// console. Log () {// console. Log () {// console. Emit a message this.sendmessage. emit({MSG: 'hello newtimer ', color: 'red'})}}Copy the code