Angular中的組件交互

官方文檔其實對此已經有了比較好的說明，但是理解起來還是有一定難度。其實Angular體系的組件交互總結起來就是兩點：

1.父組件向子組件傳值，通過屬性綁定，即中括號[ ]

2.子組件向父組件傳值，通過事件觸發，即小括號( )

父組件向子組件傳值

首先，子組件中要用@Input()裝飾器來表示輸入的變量，將父組件傳入的內容用一個變量承載。
例如，子組件（假設名稱爲”app-child”）中：

@Input() incomingData: any;

然後在父組件中使用

//注意這裏綁定的屬性名稱，就是子組件中變量的名稱
//後面的data則是父組件中的data變量
<app-child [incomingData]="data"></app-child>

這樣，子組件就可以獲取到父組件傳入的值，並進行操作。

子組件向父組件傳值

子組件向父組件傳值要通過事件來傳遞。
首先在子組件中要定義EventEmitter，來創建自定義事件。

@Output() outputEvent = new EventEmitter<any>();

這時，子組件app-child就有了一個自定義的事件outputEvent，並且可以由開發者決定在子組件中何時觸發，觸發方式爲調用emit()事件。

//在子組件中發射事件，而數據value則會包裝在$event中
outputEvent.emit(value);

同時，對於父組件而言，需要對子組件的事件設置事件監聽器，從而捕捉子組件的事件，同時也就能獲取到傳過來的數據。

//父組件中捕捉事件，這裏對應的回調函數爲resolveFn(event)
<app-child (outputEvent)="resolveFn($event)"></app-child>

然後，在resolveFn(event)中傳入的$event也就是子組件傳入的值，這樣也就完成了子組件向父組件的傳值。