前言
一個Angular應用一般情況下包含多個元件，而且要讓元件互相之間能進行通訊（資料傳送），這樣才能構成一個有機的完整系統。
1、情景引入
下面例舉一個實際遇到的情況：
上圖頁面包含兩個元件，「新增班級元件」和「選擇教師元件」，在新增班級時需要選擇改班級的管理教師，管理教師列表要從資料庫中獲取。選擇好教師後，「選擇教師元件」要把選擇的教師物件傳遞迴「新增班級元件」，這其中涉及到物件傳遞稱為通訊。
2、元件關係
元件之間有幾種典型的關係：父子關係、兄弟關係、沒有直接關係
父子關係說明：有A、B兩個元件（不一定在同一個模組），如果A元件的view頁面中引用了B的selector標籤，則稱A為B的父元件，或B為A的子元件。
3、通訊方案
瞭解完元件存在的關係，相應地，元件之間有以下幾種典型的通訊方案：
直接的父子關係：父元件直接訪問子元件的 public 屬性和方法
直接的父子關係：藉助於 @Input 和 @Output 進行通訊
沒有直接關係：藉助於 Service 單例進行通訊
利用 cookie 和 localstorage 進行通訊
利用 session 進行通訊
直接呼叫
假設BComponent是AComponent的子元件。
對於有直接父子關係的元件，父元件可以直接訪問子元件裡面 public 型的屬性和方法，示常式式碼片段如下：
顯然，子元件B裡面必須暴露一個 public 型的 childFunction 方法，就像這樣：
public childFunction():void{ console.log("子元件的名字是"）; }
以上是通過在模板裡面定義區域性變數的方式來直接呼叫子元件裡面的 public 型方法。在父元件的內部也可以訪問到子元件的例項，需要利用到 @ViewChild 註解，示例如下：
@ViewChild(BComponent) private bComponent: BComponent;
如果通過 @ViewChild 註解，父元件直接訪問子元件，那麼兩個元件之間的關係就被固定死了。父子兩個元件緊密依賴，誰也離不開誰，不能單獨使用了。儘量避免這樣做。
@Input 和 @Output
同樣假設BComponent是AComponent的子元件。
我們可以利用 @Input 裝飾器，讓父元件直接給子元件傳遞引數，子元件BComponent上這樣寫：
@Input() public title:string;
父元件view上可以這樣設定 title 這個引數（這個引數可以是個父元件想要傳給子元件的變數或物件等）：
前面是父元件->子元件傳遞資料，過程相對簡單，下面是子元件->父元件傳資料，過程較複雜。
@Output 的本質是事件機制，我們可以利用它來監聽子元件上派發的事件，子元件上這樣寫：
@Output() public selected=new EventEmitter<要傳給父元件的物件型別>();
EventEmitter：在angular中元件通過定義EventEmitter 事件彈射器的方式由子元件向父元件傳送資料。
selected是一個事件，觸發 selected 事件的方式如下:
this.selected.emit(物件);
在子元件上定義一個方法onChange()，使子元件view能夠呼叫該方法觸發 selected 事件：
onChange() { this.selected.emit(要傳給父元件的物件); }
父元件可以這樣監聽selected事件：
➊ 使用我們剛剛在子元件中定義的@Output() selected
① 方法名需要在父元件C層中定義，用於接收子元件傳過來的事件，而引數名可以隨性起，但我們一般為起名為$event以示此處為該元件的一個彈射器。
[madbeef ] angular元件間通訊的實現方法示例已經有289次圍觀
