美文网首页
Angular 父组件监听子组件事件--by EventEmit

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

作者: 柳源居士 | 来源:发表于2018-11-17 10:35 被阅读257次

    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 传递给父组件中的处理方法。

    相关文章

      网友评论

          本文标题:Angular 父组件监听子组件事件--by EventEmit

          本文链接:https://www.haomeiwen.com/subject/xqovfqtx.html