Detailed explanation of Angular parent-child component communication

Overview

Angular component communication

Component tree, number 1 is the root component AppComponent.

Components are loosely coupled, and the less they know about each other, the better.

Clicking the button in component 4 triggers the initialization logic of component 5.

Traditional approach: Call the method of component 5 in the click event of button 4. Tight coupling.

Angular: Implemented without component 4 knowing component 5 exists at all.

Use loose coupling to pass data between components to develop highly reusable components.

Use input and output properties to pass data between components in a parent-child relationship.

1. Overview of input and output properties

Components are designed as black-box models, using input properties to declare what they receive from the outside world. There is no need to know where these things come from.

A component only needs to know what to do when the outside world provides it with what it needs.

Components emit events through output properties to tell the outside world something that might be of interest. There is no need to know to which component the event is emitted.

Anyone who is interested can subscribe to the events emitted by the component.

2. Input attributes

The subcomponent defines two input properties, which are decorated with the @Input() decorator.

@Input()
  stockCode: string;
  @Input()
  amount:number;

The parent component binds the stock attribute to the stockCode attribute of the child component by binding the attribute to the child component input attribute.

<div>
  I am the parent component</div>
<div>
  <input type="text" [(ngModel)]="stock" placeholder="Please enter the stock code">
  <app-order [stockCode]=stock [amount]="100"></app-order>
</div>

3. Property binding is one-way, from parent component to child component

Reset the value of the subcomponent's stockCode to Apple every 3 seconds.

export class OrderComponent implements OnInit {

  @Input()
  stockCode: string;
  @Input()
  amount:number;

  constructor() { 
    setInterval(()=>{
      this.stockCode = 'Apple'
    },3000)
  }

  ngOnInit() {
  }
}

When the value of the child component's stockCode changes to Apple, the value of the parent component's stock does not change. This means that the binding is one-way. Only the parent component can change the child component, and changes to the child component's properties will not affect the parent component.

4. Output properties

Angular components can use EventEmitter objects to emit custom events, which can be handled by other components. EventEmitter is a subclass of the Subject class in Rxjs. In responsive programming, it can be used as both an observer and an observer. That is to say, the EventEmitter object can emit custom events through its emit method, and can also subscribe to the event stream emitted by EventEmitter through the subscribe method.

How to use EventEmit to emit events from within a component?

Example scenario: Quote component

Suppose you need a component that can connect to a stock exchange and display the changing stock prices in real time. In order to make this component reusable in different financial applications, in addition to displaying the stock prices in real time, the component should also send the latest stock prices to the outside of the component so that other components can execute corresponding business logic based on the changing stock prices.

Note: It is a good practice to explicitly define specific data structures using classes or interfaces.

1. First simulate a real-time change in IBM's stock price

export class PriceQuoteComponent implements OnInit {

  //Do not connect to the stock service, use a random number generator to simulate the stock price changes, and display the stock code and the latest price stockCode:string="IBM";
  price:number;

  constructor() {
    setInterval(()=>{
      let priceQuote:PriceQuote = new PriceQuote(this.stockCode,100*Math.random());
      this.price=priceQuote.lastPrice;
    },1000)
  }

  ngOnInit() {
  }

}


//Encapsulate a quote object to encapsulate stock price information //It is a good habit to clearly define specific data structures with classes or interfaces export class PriceQuote {
  constructor(public stockCode: string, //stock code public lastPrice: number //latest price) {
  }
}

2. Output the information and tell the outside world who is interested to subscribe

The type behind EventEmit is the type of data in the event being emitted.

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-price-quote',
  templateUrl: './price-quote.component.html',
  styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {

  //Do not connect to the stock service, use a random number generator to simulate the stock price changes, and display the stock code and the latest price stockCode: string = "IBM";
  price: number;

  @Output() //The emission event needs to be written as Output
  //EventEmitter requires a generic lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
  //

  constructor() {
    setInterval(() => {
      let priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      //Use lastPrice to emit a value this.lastPrice.emit(priceQuote);
    }, 1000)
  }

  ngOnInit() {
  }

}
//Encapsulate a quote object to encapsulate stock price information //It is a good habit to clearly define specific data structures with classes or interfaces export class PriceQuote {
  constructor(public stockCode: string, //stock code public lastPrice: number //latest price) {
  }
}

3. Receive quotation information and display it in the parent component

The parent component template captures and handles this event through event binding.

export class AppComponent {
  stock = "";
  priceQuote: PriceQuote = new PriceQuote("", 0);

  //The type of event is the type of data emitted when the child component emits //The parent component can get priceQuoteHandler(event:PriceQuote){
    this.priceQuote=event;
  }
}

stencil

<!--By default, the event name is the name of the output attribute-->
<app-price-quote (lastPrice)="priceQuoteHandler($event)"></app-price-quote>

<div>
  This is outside the quote component<br/>
  The stock code is {{priceQuote.stockCode}},
  The stock price is {{priceQuote.lastPrice | number:"2.0-2"}}
</div>

By default, the event name is the name of the output attribute. You can change the event name by

@Output("priceChange") // Output is required to launch the event
  //EventEmitter requires a generic lastPrice: EventEmitter<PriceQuote> = new EventEmitter();

The template is also changed to

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>

Summarize

Events are emitted through output properties, and data is carried through events. They are captured and processed through event binding in the parent component template.

If there is no parent-child relationship between two components, how to pass data in a loosely coupled way. At this time, the middleman mode needs to be used.

The above is a detailed explanation of the communication between Angular parent-child components. For more information about the communication between Angular parent-child components, please pay attention to other related articles on 123WORDPRESS.COM!