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

EventEmitter的一个典型应用就是父组件监听子组件的事件。

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

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

 

//EventEmitter 属性
 @Output() voted = new EventEmitter<boolean>();
//向父组件发射 一个boolean型的参数 agreed
 vote(agreed: boolean) {
    this.voted.emit(agreed);
  }

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

 

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

angular 把事件参数用$event 传递给父组件中的处理方法。

作者：柳源居士
链接：https://www.jianshu.com/p/145a06f05206
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。