Angular 标记侦听器中的 NgZone

Question

我正在尝试将一些 angular 属性与 *ngIf 绑定，但根本不起作用。

我给你看我的代码，首先是我的 loadMap 函数：

  loadMap() {
    this.map = new google.maps.Map(document.getElementById('map'), this.mapOptions);
    google.maps.event.addListenerOnce(this.map, 'idle', ()=>{
      this.addMarkers()
    });
  }

和 addMarkers() 函数：

addMarkers() {
    var me = this;
    this.restaurants.map( restaurant => {
      new google.maps.Marker({
        position: new google.maps.LatLng(restaurant.location.latitude, restaurant.location.longitude),
        map: this.map,
        animation: google.maps.Animation.DROP,
        name: restaurant.id
      })
      .addListener('click', function() {
        me.ngZone.run(() => {
          this.restaurantSelected = restaurant
          console.log(this.restaurantSelected);
        });
      });
    });
  }

问题甚至在 ngZone.run() 内部，这是引用标记而不是组件。不知道怎么解决这个问题。

提前致谢。

此致。

Answer 1

我会使用箭头函数而不是函数表达式来保留 this

.addListener('click', () => {
                     ^^^^^^^^
   me.ngZone.run(() => {
      this.restaurantSelected = restaurant
      console.log(this.restaurantSelected);
    });
});

Angular 标记侦听器中的 NgZone

Angular NgZone in marker listener

google-maps

listener

google-maps-markers

angular