Angular元件中間人模式

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

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

中間人負責從乙個元件接收資料並將其傳遞給另乙個元件。

在**元件上加乙個按鈕，在**到某個**的時候交易員可以點選按鈕在這個**買這**票。

<
div>
我是**元件
div>
<
div>
****是}，****是}
div>
<
div>
<
input 
type
="button"
value
="立即購買"
(click)
="$($event)"
>
div>

@output()
buy:eventemitter
=new
eventemitter();
buystock(event)

父元件中去監聽buy事件，獲得當前的購買資訊後

<
(buy)
="buyhandler($event)"
>
>

buyhandler(event:pricequote)

把**資訊通過屬性繫結傳給下單元件即可。

下單元件有乙個輸入屬性接收**並展示到頁面。

@input()
pricequote:pricequote;

我是下單元件
買100手}**,****是}

**元件**一直在變，點立即購買就會按照當前****當前**，什麼時候點按鈕什麼時候就會更新。

好處：在**元件裡沒有任何和下單元件相關的**，**元件甚至不知道下單元件的存在。**元件只是發射購買時候的****和****。同樣在下單元件中也沒有任何和**元件相關的東西。**元件和下單元件在彼此不知道的情況下共同完成裡**下單的功能。元件高重用。

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

這時，應該使用乙個可注入的服務作為中間人。無論何時當元件被建立，中間人服務會被注入。元件可以訂閱服務發射的事件流。

在使用angular開發乙個應用前，應該深入思考並設計好編寫哪些可重用的元件，比如訂單元件，**元件，哪些元件和服務做哪些元件的中間人。元件的輸入是什麼，輸出是什麼，元件之間如何通訊。然後開始寫**。

Angular元件 中間人模式