Angular2 EventEmitter löst kein Ereignis aus, wenn es in einem Callback ausgegeben wird

Question

Ich entwickle eine Angular2-Komponente, die die Webcam verwendet, um ein Bild an einem Canvas-Element zu fangen und es als Blob zu extrahieren. Die Blob und das Ereignis funktionieren getrennt voneinander, aber wenn ich versuche, das Ereignis innerhalb der Rückruffunktion von toBlob zu senden, wird das Ereignis für seine Listener nicht mehr ausgelöst.

Dies funktioniert:

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. 
}); 

Dies gilt nicht:

var self = this; 

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

Ich bin sicher, es ist, weil toBlob asynchron ausgeführt wird. In Angular1 würde mein Instinkt sein, ein $ Timeout zu machen und mich anzumelden, aber ich dachte, dass wir für einen EventEmitter nicht mehr mit all dem fertig werden müssen?

Wer weiß, wie man das umgehen kann?

Answer 1

Diese API wird nicht von Angulars Zone gepatcht. Sie müssen explizit den Code laufen in winkelförmigen Stangen Zone zur Änderungserkennung machen danach geschehen:

constructor(private zone:NgZone){} 

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

Sie auch self nicht brauchen, wenn Sie () => anstelle von function()