angular組件間通信

一個Angular應用通常狀況下包含多個組件，並且要讓組件互相之間能進行通信（數據傳送），這樣才能構成一個有機的完整系統。

一、情景引入

下面例舉一個實際遇到的狀況：

上圖頁面包含兩個組件，「新增班級組件」和「選擇教師組件」，在新增班級時須要選擇改班級的管理教師，管理教師列表要從數據庫中獲取。選擇好教師後，「選擇教師組件」要把選擇的教師對象傳遞迴「新增班級組件」，這其中涉及到對象傳遞稱爲通信。

二、組件關係

組件之間有幾種典型的關係：父子關係、兄弟關係、沒有直接關係

父子關係說明：有A、B兩個組件（不必定在同一個模塊），若是A組件的view頁面中引用了B的selector標籤，則稱A爲B的父組件，或B爲A的子組件。

三、通信方案

瞭解完組件存在的關係，相應地，組件之間有如下幾種典型的通信方案：

• 直接的父子關係：父組件直接訪問子組件的 public 屬性和方法
• 直接的父子關係：藉助於 @Input 和 @Output 進行通信
• 沒有直接關係：藉助於 Service 單例進行通信
• 利用 cookie 和 localstorage 進行通信
• 利用 session 進行通信

直接調用

假設BComponent是AComponent的子組件。
對於有直接父子關係的組件，父組件能夠直接訪問子組件裏面 public 型的屬性和方法，示例代碼片斷以下：

<B #child></B>  
<button (click)="child.childFunction()">調用子組件方法</button>

顯然，子組件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 這個參數（這個參數能夠是個父組件想要傳給子組件的變量或對象等）：

<B title="Hello Angular"></B>

前面是父組件->子組件傳遞數據，過程相對簡單，下面是子組件->父組件傳數據，過程較複雜。
@Output 的本質是事件機制，咱們能夠利用它來監聽子組件上派發的事件，子組件上這樣寫：

@Output() 
public selected=new EventEmitter<要傳給父組件的對象類型>();

EventEmitter：在angular中組件經過定義EventEmitter 事件彈射器的方式由子組件向父組件發送數據。
selected是一個事件，觸發 selected 事件的方式以下:

this.selected.emit(對象);

在子組件上定義一個方法onChange()，使子組件view可以調用該方法觸發 selected 事件：

onChange() {    
  this.selected.emit(要傳給父組件的對象);  
}

父組件能夠這樣監聽selected事件：

<B (selected)➊="onTeacherSelected($event)①"></B>

➊ 使用咱們剛剛在子組件中定義的@Output() selected① 方法名須要在C層中定義，而參數名能夠隨性起，但咱們通常爲起名爲$event以示此處爲該組件的一個彈射器。