Angular 組件通訊（@Output，EventEmitter）

相對於上篇【Angular組件通訊（@Input，@ViewChild）】文章中【子組件給父組件通訊】是父組件通過使用【@ViewChild】主動獲取子組件的數據和方法，下面我們在學習另外一種相對複雜的方式實現：

一、前提準備：

首先使用 CLI 創建兩個組件，分別是【parent】和【news】分別扮演父子組件（相對）；

二、演示步驟：

子組件通過 @Output 觸發父組件的方法

• 子組件引入 Output 和 EventEmitter；

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

• 子組件中實例化 EventEmitter；

//用 EventEmitter 和 Output 裝飾器配合使用，<string> 指定變量類型
@Output() private outer = new EventEmitter<string>();

• 子組件通過 EventEmitter 對象 outer 實例廣播數據；

runNews():void{
  console.info('開始emit廣播數據');
  this.outer.emit('我是news新聞組件'); //通過outer實例對象的emit方法廣播數據
}

• 父組件調用子組件的時候，定義接收事件，outer 就是子組件的 EventEmitter 對象 outer ；

//父組件中掛載子組件，注意 (outer) 名稱必須和子組件中的名稱一致對應
<app-news (outer)="runParent($event)"></app-news>

• 父組件接收到數據會調用自己 ts 文件中的 runParent 方法，此時父組件就能拿到子組件的數據；

runParent(e:any):void{
  console.log('我是parent父組件的runParent方法');
  console.log(e); //e就接收到子組件中方法的(emit)廣播數據
}

三、總結：

【子組件給父組件通訊】可以通過兩種方式實現，分別如下：

1. 簡單方式，父組件通過 【@ViewChild】主動獲取子組件的字段和方法；
2. 複雜方式，子組件通過 【@Output，EventEmitter】 觸發父組件的方法；