Angular2 事件发射器在回调中发出时不会引发事件

Question

我正在开发一个Angular2组件，它使用网络摄像头将图片捕获到画布元素，并将其提取为Blob。单独地，Blob和事件正常工作，但是当我尝试从toBlob的回调函数中发出事件时，事件不再为其侦听器引发。

如此:

var self = this;
self.gotSnapshot.emit({}); //Raises the gotSnapshot event correctly.
this.canvas.toBlob(function(blob){
  console.log(blob); //Logs the blob to console correctly.
});

这并不:

var self = this;
this.canvas.toBlob(function(blob){
  self.gotSnapshot.emit(blob); //Event is never raised for listeners
});

我确信这是因为toBlob是异步执行的。在Angular1中，我的直觉是做一个$timeout并调用apply，但我认为对于EventEmitter，我们不必再处理所有这些了。

有人知道怎么解决这个问题吗?

Answer 1

这个API不会被angular的zone修补。你需要显式地让代码在angular区域中运行，以便之后进行变更检测:

constructor(private zone:NgZone){}
someMethod() {
  this.canvas.toBlob((blob) => {
    this.zone.run(() => {
      this.gotSnapshot.emit(blob); 
    });
  });
}

如果你用() =>代替function()，你也不需要self