JavaScript Listener - Angular 2 Zone

Question

Ich habe einen JavaScript Zuhörer innerhalb eines Google Maps Objekt:

map.data.addListener('click', (event) => { 
     var mapElement = event.feature.getProperty('type'); 
     switch(mapElement){ 
     case 'cameras': 
      var cameraID = event.feature.getProperty('trafficID'); 
      this.cameraService.createCamera(cameraID); 
      break; ... 

Diese 'Karte' Listener ruft eine Funktion in einem Dienst 'cameraService' genannt, die die Kamera initialisiert. Ich habe ein DOM-Objekt, das Eckige 2 der verwendet ngIf Richtlinie, um festzustellen, ob es vorhanden ist:

<div *ngIf="cameraService.camera1 != null"> 
    <app-camera></app-camera> 
</div> 

Mein Problem: ngIf läuft nicht nach dem Click-Ereignisse passiert. Konsolenprotokolle zeigen, dass das Kameraobjekt erstellt wurde, und wenn ich auf ein anderes Element (außerhalb der Karte) klicke, wird die Ansicht aktualisiert (ngIf change detection startet erneut).

Ich nehme an, dass dieses Problem mit der Angular 2-Zone zu tun hat - wenn ich auf die Google Map klicke, befindet es sich außerhalb der Angular 2-Zone und wenn ich auf ein anderes Element (innerhalb von Angular 2) klicke, gehe ich wieder rein die Angular 2-Zone [Korrigieren Sie mich, wenn ich falsch liege!] ... Wie kann ich manuell ngIf auslösen oder die Angular 2-Zone am Ende des Click-Ereignisses erneut betreten, um die Angular 2-Änderungserkennung erneut zu starten?

Answer 1

Sie können entweder zone.run() verwenden, um die Ausführung wieder in winkelförmigen Stangen Zone zu zwingen, oder Sie können manuell Änderungserkennung aufrufen:

constructor(private zone:NgZone, private cdRef:ChangeDetectorRef) {} 

map.data.addListener('click', (event) => { 
    this.zone.run(() => { 
     var mapElement = event.feature.getProperty('type'); 
     switch(mapElement){ 
     case 'cameras': 
      var cameraID = event.feature.getProperty('trafficID'); 
      this.cameraService.createCamera(cameraID); 
      break; ... 
    }); 
} 

oder

map.data.addListener('click', (event) => { 
     var mapElement = event.feature.getProperty('type'); 
     switch(mapElement){ 
     case 'cameras': 
      var cameraID = event.feature.getProperty('trafficID'); 
      this.cameraService.createCamera(cameraID); 
      this.cdRef.detectChanges(); // <<<=== added 
      break; ... 
}