angular6 子組件向父組件通訊

子組件向父組件傳值

in Angular 6. 子組件以 ==觸發emit事件方式== 將 數據 傳給父組件。

子組件中：

// js
import {Output,EventEmitter}from '@angular/core'

// 子組件中申請輸出實例
@Output fromChild = new EventEmitter();

... ...
// 發送數據
fromChild.emit(data);
複製代碼

假如子組件的標籤爲：

父模塊中：

將子組件用在父組件中，使用(fromChild)來傳遞emit函數

// html     fromChild 定義在子組件中
<app-child (fromChild)="fromChildFunc($event)" ></app-child>


// js       fromChildFunc 處理處理從子組件接受到的值
fromChildFunc(data) {
  console.log(data);
  ... ...
}
複製代碼

• 坑點： fromChildFunc( $event ) 參數必須爲 $event

  這麼作的緣由是避免與本組件的同名變量發生衝突

• 參考：組件之間的交互