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