JavaScriptのリスナー - アンギュラ2ゾーン

Question

私はGoogleマップオブジェクト内のJavaScriptリスナーを持っている：

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

これは、「マップ」リスナーは、カメラを初期化「cameraService」と呼ばれるサービス内の関数を呼び出します。

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

私の問題：クリックイベントが発生した後ngIfは実行されません。私はそれが存在するかどうかを判断するために角度2のngIfディレクティブを使用してDOMオブジェクトを持っています。コンソールログはカメラオブジェクトが作成されたことを示し、別の要素（マップの外）をクリックするとビューが更新されます（変更検出が再び開始されます）。

私はこの問題をAngular 2ゾーンとみなします.GoogleマップをクリックするとAngular 2ゾーンの外にあり、別の要素（Angular 2内）をクリックすると再び入ります角度2のゾーン[私が間違っている場合は私を修正してください] ...クリック2イベントの検出を再開するには、手動でngIfをトリガするか、またはクリックイベントの最後に角度2のゾーンに再入力しますか？

Answer 1

あなたはどちらかAngularsゾーンに戻って実行を強制的にzone.run()を使用するか、手動で変化検出を呼び出すことができます。

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

または

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