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】 触发父组件的方法；