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并打电话申请，但是我想为一个EventEmitter我们不再需要处理所有这些了吗？

任何人都知道怎么解决这个问题？

Answer 1

Angulars区域未对此API进行修补。您需要明确地使代码在Angulars区域中运行，以便以后进行更改检测：

constructor(private zone:NgZone){}

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

如果您使用self代替() =>

，则也不需要function()

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

1 个答案: