JavaScript Слушатель - Угловая 2 зоны

Question

У меня есть JavaScript Слушатель внутри объекта Google Maps:

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», который инициализирует камеру. У меня есть объект DOM, который использует директиву УГЛОВЫХ 2 в ngIf, чтобы определить, существует ли оно:

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

Моей проблема: ngIf не запускаются после того, как происходит событие щелчка. Журналы консоли показывают, что объект камеры создан, и если я нажимаю на другой элемент (вне карты), обновления вида (ngIf обнаружение изменения снова запускается).

Я предполагаю, что этот вопрос связан с зоной «Угловая 2», поэтому, когда я нажимаю на карту Google, она находится за пределами зоны «Угловой 2», и когда я нажимаю на другой элемент (в пределах угла 2), я снова вхожу зона Angular 2 [Исправьте меня, если я ошибаюсь!] ... Как вручную запустить ngIf или повторно войти в зону Angular 2 в конце события click, чтобы перезапустить обнаружение изменения углового 2?

Answer 1

Вы можете использовать, чтобы заставить 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; ... 
}