Angular2 EventEmitter触发父组件

发布时间：2020-12-17 17:27:39 所属栏目：安全来源：网络整理

导读：我试图从子组件到父组件触发一个事件. @Component({ template:'foo/foo'}) export class ParentComponent{ onDoSomething($event){ //do work here }}@Component({selector:'foo'template:button (click)="onClick($event)"MyButton/button})export class Ch

我试图从子组件到父组件触发一个事件.

@Component({
 template:'<foo></foo>'
})
 export class ParentComponent{
   onDoSomething($event){
   //do work here
   }

}

@Component({
selector:'foo'
template:<button (click)="onClick($event)">MyButton</button>
})
export class ChildComponent{
   myEvent eventName = new EventEmitter();

   onClick(button){
        this.eventName.emit(button);
   } 

}

我如何让这个工作？

解决方法

您可以使用@Output在子组件中定义EventEmitter

@Component({
 selector:'foo',template:`<button (click)="onClick($event)">MyButton</button>`
})
export class ChildComponent{
   @Output() myEvent = new EventEmitter();

   onClick(button){
        this.myEvent.emit(button);
   } 

}

然后你在父组件中“订阅”这个事件,如下所示：

@Component({
  selector: 'my-app',template: `Hello World <foo (myEvent)="myEvent($event)"></foo>`,directives: [],providers: []
})
export class AppComponent {

    myEvent($event){
      console.log(1,$event);
    }
}

完整示例：http://plnkr.co/edit/MeQbC7Jbc8rprMF66aEF?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!