Angular組件——中間人模式

設計一個組件時，組件應該是內聚的，應該不依賴外部已經存在的組件，要實現這種鬆耦合的組件要使用中間人模式。

1、中間人模式

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

中間人負責從一個組件接收數據並將其傳遞給另外一個組件。

2、例子

股票報價組件爲例，假設交易員在監看着報價組件的價格，當股票價格達到某一個值的時候，交易員會點一個購買按鈕，來購買股票。問題：報價組件並不知道應該如何下單來買股票，它只是用來監控股票價格的。因此報價組件在這時應該通知它的中間人【也就是APP組件】告訴它交易員要在某個價格購買某隻股票。中間人應該知道哪一個組件能夠完成下單，並將股票代碼和當前的價格傳給這個組件。

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

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

<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)); }

二、父組件接收處理事件

父組件中去監聽buy事件，得到當前的購買信息後

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

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

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

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

三、下單組件 

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

 @Input() priceQuote:PriceQuote;

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

四、運行結果

報價組件價格一直在變，點當即購買就會按照當前價格買入當前股票，何時點按鈕何時就會更新。

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

3、使用服務做爲中間人 

若是兩個組件沒有共同的父組件，甚至不在一塊顯示，要通信怎麼辦？好比文章開頭圖中的組件4和組件6。

這時，應該使用一個可注入的服務做爲中間人。不管什麼時候當組件被建立，中間人服務會被注入。組件能夠訂閱服務發射的事件流。

 

在使用Angular開發一個應用前，應該深刻思考並設計好編寫哪些可重用的組件，好比訂單組件，報價組件，哪些組件和服務作哪些組件的中間人。組件的輸入是什麼，輸出是什麼，組件之間如何通信。而後開始寫代碼。

 

本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/8638059.html  有問題歡迎與我討論，共同進步。