JavaScript 监听器 - Angular 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; ...

此 'map' 侦听器调用名为 '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变化检测?

Answer 1

您可以使用 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', (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; ...
}

JavaScript 监听器 - Angular 2 区

JavaScript Listener - Angular 2 zone

javascript

listener

angular2-zone

angular