Detailed explanation of the middleman mode of Angular components

1. Middleman Model

Except for component 1, each component in this component tree has a parent component that can play the role of a middleman. The top-level middleman is component 1, which enables components 2, 3, and 6 to communicate with each other. By analogy, component 2 is the middleman between component 4 and component 5. Component 3 is the middleman between components 7 and 8.

A middleman is responsible for receiving data from one component and passing it to another.

2. Examples

Taking the stock quote component as an example, suppose a trader is monitoring the price of the quote component. When the stock price reaches a certain value, the trader will click a buy button to buy the stock. Problem: The quote component does not know how to place an order to buy a stock, it is only used to monitor the stock price. Therefore, the quotation component should notify its middleman [that is, the APP component] at this time to tell it that the trader wants to buy a certain stock at a certain price. The middleman should know which component can complete the order and pass the stock code and current price to this component.

1. Add a buy button to the quotation component

Add a button to the quote component. When the stock reaches a certain price, the trader can click the button to buy the stock at this price.

<div>
  I am a quotation component</div>
<div>
  The stock code is {{stockCode}} and the stock price is {{price | number:"2.0-2"}}
</div>
<div>
  <input type="button" value="Buy Now" (click)="$($event)">
</div>

@Output()
  buy:EventEmitter<PriceQuote>=new EventEmitter();

  buyStock(event){
    this.buy.emit(new PriceQuote(this.stockCode,this.price));
  }

2. Parent component receives and processes events

Listen to the buy event in the parent component and obtain the current purchase information

<app-price-quote (buy)="buyHandler($event)" ></app-price-quote>

  buyHandler(event:PriceQuote){
    this.priceQuote=event;
  }

The quotation information can be passed to the order component through attribute binding.

<app-order [priceQuote]="priceQuote"></app-order>

3. Order component

The order component has an input property to receive the quote and display it on the page.

  @Input()
  priceQuote:PriceQuote;

<div>
  I am placing an order component</div>
<div>
  Buy 100 lots of {{priceQuote.stockCode}} stock at {{priceQuote.lastPrice | number:"2.2-2"}}
</div>

4. Operation results

The price of the quotation component is constantly changing. Clicking Buy Now will buy the current stock at the current price. It will be updated whenever you click the button.

Benefits: There is no code related to the order component in the quotation component, and the quotation component does not even know the existence of the order component. The quote component simply emits the stock symbol and stock price at the time of purchase. Likewise, there is nothing in the order component related to the quote component. The quotation component and the order component work together to complete the function of placing stock orders without knowing each other. High component reuse.

3. Using a service as a middleman

If two components do not have a common parent component and are not even displayed together, how can they communicate? For example, components 4 and 6 in the figure at the beginning of the article.

In this case, an injectable service should be used as a middleman. Whenever a component is created, the middleman service is injected. Components can subscribe to the stream of events emitted by a service.

Before developing an application with Angular, you should think deeply and design which reusable components to write, such as order components, quotation components, and which components and services act as middlemen for which components. What are the inputs of the components, what are the outputs, and how do the components communicate with each other. Then start writing code.

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