没有使用 ngClass 与谷歌地图中的地图缩放事件进行绑定

Question

我有这个：

<i [ngClass]="{'active': isGeoLocationButtonEnabled }" class="toggle fa fa-crosshairs" >

处理程序是：

private onStartZoomEvent(event) {
    if (event.zoom != 12) {
        console.log("Current zoom level is: ", event.zoom);
        this._eventAggregator.trigger(new DisableGeolocationEvent());
        this.disableGeolocationButton();
    }
}

触发的事件如下所示：

private mapZoomChangedHandler() {
    this._mapsWrapper.getMap().then((map: google.maps.Map) => {
       let zoom = map.getZoom();
       this._eventAggregator.trigger(new MapStartZoomEvent(zoom));
    });
}

我是这样订阅的：

  this._eventAggregator.subscribe(MapStartZoomEvent, this.onStartZoomEvent.bind(this));

问题是我第一次更改地图缩放时，该按钮未被禁用。第二次我点击它时，它被禁用了。当我调试时，一切似乎都很好，我的布尔值是GeoLocationButtonEnabled设置为false，但活动类仍然存在（它只是背景颜色突出显示）。

Answer 1

您不显示isGeoLocationButtonEnabled更新的位置。我很确定谷歌地图代码在Angulars区域之外运行。

使用 zone.run(...) 运行更新 Angular 区域内模型的代码，以便之后调用更改检测

constructor(private zone:NgZone) {}
methodWhereEnabledIsUpdated() {
  ...
  this.zone.run(() => {
    isGeoLocationButtonEnabled = someValue;
  });
  ...
}