如何保持 Angular 4 模板与谷歌地图点击事件同步

Question

我需要依靠Google Maps API，该API的事件与Angular 4中的变化检测系统不同步。如何让他们同步？

location = 'some initial value';
ngOnInit() {
...
google.maps.event.addListener(this.map, 'click', this.updateLocation.bind(this));
}
private updateLocation(event) {
this.location = event.latLng.toString();
console.log(this.location);
}

我的模板始终显示初始值。在控制台中，我确实看到了更新的值。

在AngularJS中，我会使用$applyAsync。我想用 RxJS 用"Angular 4 方式"解决这个问题，但我不知道如何处理它。

在此处查看完整示例：http://plnkr.co/edit/PRUZtaBsVpIjxJSHN3gi?p=preview

Answer 1

在角度区域内运行代码可以帮助您

constructor(private zone: NgZone) {}
google.maps.event.addListener(this.map, 'click', 
(e) => this.zone.run(() => this.updateLocation(e)));

固定普伦克