快捷導(dǎo)航

詳解Angular組件之中間人模式

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

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

一、中間人模式

該組件樹(shù)中除了組件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)買按鈕，來(lái)購(gòu)買股票。問(wèn)題：報(bào)價(jià)組件并不知道應(yīng)該如何下單來(lái)買股票，它只是用來(lái)監(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)聽(tīng)buy事件，獲得當(dāng)前的購(gòu)買信息后

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: