詳解Angular組件之中間人模式

更新時(shí)間：2021年05月24日 08:33:59 作者：starof

設(shè)計(jì)一個(gè)組件時(shí)，組件應(yīng)該是內(nèi)聚的，應(yīng)該不依賴外部已經(jīng)存在的組件，要實(shí)現(xiàn)這種松耦合的組件要使用中間人模式。

一、中間人模式

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

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

二、例子

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

1、報(bào)價(jià)組件上加購(gòu)買按鈕

在報(bào)價(jià)組件上加一個(gè)按鈕，在股票到某個(gè)價(jià)格的時(shí)候交易員可以點(diǎn)擊按鈕在這個(gè)價(jià)格買這個(gè)股票。

<div>
  我是報(bào)價(jià)組件
</div>
<div>
  股票代碼是{{stockCode}}，股票價(jià)格是{{price | number:"2.0-2"}}
</div>
<div>
  <input type="button" value="立即購(gòu)買" (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)前的購(gòu)買信息后

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

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

把報(bào)價(jià)信息通過屬性綁定傳給下單組件即可。

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

3、下單組件

下單組件有一個(gè)輸入屬性接收?qǐng)?bào)價(jià)并展示到頁(yè)面。

  @Input()
  priceQuote:PriceQuote;

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

4、運(yùn)行結(jié)果

報(bào)價(jià)組件價(jià)格一直在變，點(diǎn)立即購(gòu)買就會(huì)按照當(dāng)前價(jià)格買入當(dāng)前股票，什么時(shí)候點(diǎn)按鈕什么時(shí)候就會(huì)更新。

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