javascript - 我如何从谷歌地图信息窗口调用 Angular2 函数？

Question

Google map 以 javascript 方式集成，我想在信息窗口中调用一个 angular2 函数，如下面的代码。查看按钮的 infoContent。

for (i = 0; i < locations.length; i++) {

  let locLatLng = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
  let infoContent = '<button (click)="myFunction(' + locations[i].id + ')">Details ...</button>';

  marker = new google.maps.Marker({
    position: locLatLng,
    map: this.map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(infoContent);
      infowindow.open(this.map, marker);
    };
  })(marker, i));

}

不幸的是， Angular 点击事件 (click)="myFunction()" 做不到。一定有别的办法。如果有人能指出我正确的方向，我将非常高兴。提前致谢。

Answer 1

您可以在根窗口中实例化对 ngZone 的引用并从 infoWindow 内部调用它。

首先，您需要在构造函数中访问 NgZone:

 constructor(public _ngZone: NgZone) {    }

然后你可以在窗口、ngOnInit、构造函数或其他地方设置一个指针回到你的区域，这取决于你的代码:

    window["angularComponentRef"] = { component: this, zone: this._ngZone };

最后，您可以像这样使用 zone.run 从 infoWindow 回调到您的 Angular 函数:

    for (i = 0; i < locations.length; i++) {
        let locLatLng = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
        let infoContent: string = '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.myFunction(\'' + locations[i].id + '\');})">Details ...</button>';

        marker = new google.maps.Marker({
            position: locLatLng,
            map: this.map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(infoContent);
                infowindow.open(this.map, marker);
            };
        })(marker, i));

    }

并且您可以在需要时清理函数以避免污染窗口命名空间，例如在 ngOnDestroy 上:

 window["angularComponentRef"] = null;