无法捕获从 Angular 4 中的子组件发出的事件

Question

很抱歉我的新手问题，我正在尝试使用@OutputEventEmitter将事件从子组件发送到父组件。我无法在父组件中捕获事件。

子组件

@Component({
selector: 'app-new-attachment',
templateUrl: './new-attachment.component.html',
styleUrls: ['./new-attachment.component.css']
})
class NewAttachmentComponent {
@Input('attachment') attachment: any;
@Output() doneEditingAttachment:EventEmitter<boolean> = new EventEmitter<boolean>();
submit() {
console.log('done editing child');
this.doneEditingAttachment.emit(true);
}
}

父组件

@Component({
selector: 'app-new-article',
templateUrl: './new-article.component.html',
styleUrls: ['./new-article.component.css']
})
class NewArticleComponent {
newAttachment: any = {};
doneEditingAttachment($event) {
console.log('done editing parent ', $event);
}
}

我期望有

完成编辑子项

和一个

完成编辑父项

但我只完成了编辑孩子

Answer 1

您需要使用(eventName)表示法实际绑定到子级的事件：

<app-new-attachment [attachment]="newAttachment" (doneEditingAttachment)="doneEditingAttachment($event)"></app-new-attachment>

Answer 2

基于你需要这个的通讯网，

<app-new-attachment [attachment]="newAttachment" (doneEditingAttachment)="submit()"></app-new-attachment>