一、中間人模式

該組件樹中除了組件1以外，每個組件都有一個父組件可以扮演中間人的角色。頂級的中間人是組件1，它可以使組件2，組件3，組件6之間互相通訊。依次類推，組件2是組件4和組件5的中間人。組件3是組件7和組件8的中間人。

中間人負責(zé)從一個組件接收數(shù)據(jù)并將其傳遞給另一個組件。

二、例子

股票報價組件為例，假設(shè)交易員在監(jiān)看著報價組件的價格，當(dāng)股票價格達到某一個值的時候，交易員會點一個購買按鈕，來購買股票。問題：報價組件并不知道應(yīng)該如何下單來買股票，它只是用來監(jiān)控股票價格的。所以報價組件在這時應(yīng)該通知它的中間人【也就是APP組件】告訴它交易員要在某個價格購買某只股票。中間人應(yīng)該知道哪個組件可以完成下單，并將股票代碼和當(dāng)前的價格傳給這個組件。

1、報價組件上加購買按鈕

在報價組件上加一個按鈕，在股票到某個價格的時候交易員可以點擊按鈕在這個價格買這個股票。

<div>
  我是報價組件
</div>
<div>
  股票代碼是{{stockCode}}，股票價格是{{price | number:"2.0-2"}}
</div>
<div>
  <input type="button" value="立即購買" (click)="$($event)">
</div>

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

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

2、父組件接收處理事件

父組件中去監(jiān)聽buy事件，獲得當(dāng)前的購買信息后

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

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

把報價信息通過屬性綁定傳給下單組件即可。

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

3、下單組件

下單組件有一個輸入屬性接收報價并展示到頁面。

  @Input()
  priceQuote:PriceQuote;

<div>
  我是下單組件
</div>
<div>
  買100手{{priceQuote.stockCode}}股票,買入價格是{{priceQuote.lastPrice | number:"2.2-2"}}
</div>

4、運行結(jié)果

報價組件價格一直在變，點立即購買就會按照當(dāng)前價格買入當(dāng)前股票，什么時候點按鈕什么時候就會更新。

好處：在報價組件里沒有任何和下單組件相關(guān)的代碼，報價組件甚至不知道下單組件的存在。報價組件只是發(fā)射購買時候的股票代碼和股票價格。同樣在下單組件中也沒有任何和報價組件相關(guān)的東西。報價組件和下單組件在彼此不知道的情況下共同完成里股票下單的功能。組件高重用。

三、使用服務(wù)作為中間人

如果兩個組件沒有共同的父組件，甚至不在一塊顯示，要通訊怎么辦？比如文章開頭圖中的組件4和組件6。

這時，應(yīng)該使用一個可注入的服務(wù)作為中間人。無論何時當(dāng)組件被創(chuàng)建，中間人服務(wù)會被注入。組件可以訂閱服務(wù)發(fā)射的事件流。

在使用Angular開發(fā)一個應(yīng)用前，應(yīng)該深入思考并設(shè)計好編寫哪些可重用的組件，比如訂單組件，報價組件，哪些組件和服務(wù)做哪些組件的中間人。組件的輸入是什么，輸出是什么，組件之間如何通訊。然后開始寫代碼。

以上就是詳解Angular組件之中間人模式的詳細內(nèi)容，更多關(guān)于Angular組件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論