上一篇: 在Angular 2中刷新Kendo网格下一篇:angularjs – 如何在角度js控制器...

Angular2 EventEmitter触发父组件

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular2 EventEmitter触发父组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

@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