Question

假设我在子组件中有此EventEmitter：

export class ImageUploadComponent {
    ...
    @Output() imageDataEvent: EventEmitter<string> = new EventEmitter<string>();
    ...
}

根据发生的情况，此子组件可能会发出某些东西或产生错误：

...
this.imageDataEvent.emit('good');
...
this.imageDataEvent.error('wrong');

父组件通过事件绑定侦听它：

<app-image-upload (imageDataEvent)="onImageUpload($event)"></app-image-upload>

发出'good'时，在父组件上调用onImageUpload，而$ event包含'good'。

如何处理“错”案？我怎么知道事件是什么时候出错？事件绑定对好/坏事件到底有何作用？

Answer 1

Angular的EventEmitter实际上是Observable的扩展。

据说，不处理@Output中的错误通常是最佳实践。但是，利用Observable错误流可以带来一些非常优雅的代码，并且可以访问Observable运算符有一些非常明显的好处。

唯一的区别是，绑定到Output事件的Angular模板在内部处理对Observable的{{1}}订阅。解决方案是放弃模板绑定，而仅手动预订组件属性：

EventEmitter

在您的父组件中：

<app-image-upload #upload></app-image-upload>

这还允许您使用@ViewChild('upload') upload: AppImageUploadComponent; ngAfterViewInit() { this.upload.imageDataEvent.subscribe( event => console.log('Emission!'), err => console.error(`D'oh!`), () => console.log('Complete!') ); }或所需的任何其他Observable运算符。

处理事件绑定中的EventEmitter错误

1 个答案: