Angular—組件間通訊

父子組件間通訊

父子組件間通訊還是非常簡單的，利用輸入屬性就可以完成。

1. 首先需要在子組件中聲明一個輸入屬性

2. 在父組件中也要聲明一個和子組件中類型相同的屬性

3. 在父組件的 html 文件中，傳遞給子組件

4. 然後就可以直接在子組件中的 html 中使用了

兄弟組件間通訊—中間人模式

當不是父子組件時，就不能用上面那種方法了。如果是兄弟組件，那麼就可以使用中間人模式。
中間人模式的意思就是：把父組件當作中間人，先由一個子組件將數據傳給父組件，再由父組件傳給另一個子組件。

1. 首先要解決的就是怎麼把數據從子組件傳遞給父組件，我們可以用 EventEmitter 對象來發射數據，然後由父組件來監聽，當監聽到 EventEmitter 發射了數據對象時，就執行相應的動作（即把數據傳給另一個子組件）。
 1）首先在子組件中聲明輸出屬性

 2）利用事件綁定，當發生某個事件時（比如：點擊事件），就將數據發射給父組件。

  將數據發射給父組件

  當父組件監聽到發射過來的數據時，就執行相應的事件

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

  BuyStockHandler(event : PriceQuote){
  	//將數據賦給父組件的屬性，接收發射過來的數據
    this.priceQuote = event;
  }

2. 接下來就非常簡單了，由父組件將數據傳給另一個子組件，就可以藉助輸入屬性來實現，和上面的父子組件通訊一樣。

總結

其實中間人模式的難點就在於子組件怎麼將數據傳遞給父組件，我們可以通過藉助 EventEmitter 對象來實現，接下來就和父子間的通訊一樣了。