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

Question

我正在开发一个 Angular2 组件，它使用网络摄像头将图片捕捉到 Canvas 元素，并将其提取为 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 未由 Angulars 区域修补。您需要显式地使代码在 Angulars 区域中运行，以便随后进行更改检测:

constructor(private zone:NgZone){}

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

如果您使用 () => 而不是 function()，则也不需要 self