JavaScript侦听器-角度2区域

我在Google Maps对象中有一个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”的服务中的函数，该服务初始化相机。我有一个DOM对象，它使用Angular 2的ngIf指令来确定它是否存在：

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

我的问题是：单击事件发生后，ngIf不会运行。控制台日志显示相机对象已创建，如果单击另一个元素（在地图之外），视图将更新（ngIf更改检测再次启动）

---

我假设这个问题与Angular 2区域有关-因此，当我单击Google地图时，它在Angular 2区域之外，当我单击另一个元素（Angular 2内）时，我重新进入Angular 2区域[如果我错了，请纠正我！]。。。如何在单击事件结束时手动触发ngIf或重新进入Angular 2区域以重新启动Angular 2更改检测？

您可以使用

zone.run（）

强制执行返回Angulars区域，也可以手动调用更改检测：

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'，（事件）=>{
var mapElement=event.feature.getProperty（'type'）；
开关（mapElement）{
“摄像机”案例：
var cameraID=event.feature.getProperty（'trafficID'）；
this.cameraService.createCamera（cameraID）；
this.cdRef.detectChanges（）；//太棒了！我最终使用了：this.ngZone.run（（）=>this.cameraService.cameraClicked（station_key））；这非常有效！
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; ...
}