Angular 父组件监听子组件事件--by EventEmitter

EventEmitter的一个典型应用就是父组件监听子组件的事件,子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

即：
子组件发射-父组件接收-响应
子组件的eventEmitter是一个输出属性， 通常带有@output()装饰器。
子组件：

<p>cp1 works!</p>
<button (click)="sendParent()">通过@Output给父组件广播数据</button>

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

// 这里的outer名字必须和父组件中定义的名字完全一致
@Output() private outer111 = new EventEmitter();  

sendParent(){
   let user={
     username:'Jack',
     address: "China"
   }
   // 向父组件广播数据
   this.outer111.emit(user);
}

父组件绑定并响应：
通过子组件的引用，在组件引用上面绑定：(eventEmitter)="模板表达式"，就像响应(click)事件一样。
这个例子里面绑定：

<!-- 绑定事件响应,右边表达式为响应的方法，定义在父组件中，$event接收子组件发射的参数 -->
<app-cp1 (outer111)="onMessage($event)"></app-cp1>

onMessage(e:any){
   console.log('接收到子组件的数据:');
   console.log(e);
}

在浏览器地址栏访问http://127.0.0.1:2400, 点击按钮【通过@Output给父组件广播数据】