javascript - typescript přístup k globální proměnné uvnitř posluchače

Mám projekt v Angular 2 a chci testovat posluchače událostí. Toto je definováno

map;

pak v metodě pro vyplnění mapy mám

  populateMap() {


var place = { lat: -17.822828, lng: -31.046727 };
this.map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: place,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.TOP_RIGHT
  },
  maxZoom: 19
});


this.map.addListener('click', function (e) {
 var marker = new google.maps.Marker({
    position: e.latLng,
    map: this.map
  });
  this.map.panTo(e.latLng);
});


this.map.fitBounds(this.bounds);
this.map.panToBounds(this.bounds);
}

v posluchači je vyhozena výjimka

Uncaught TypeError: Cannot read property 'panTo' of undefined

Existuje důvod, proč JavaScript nemůže najít správnou referenci „this.map“, zapomněl jsem zmínit, že se jedná o Google Maps API v3

Odpověď č. 1

Jste uvnitř jiného kontextu a proto this neodkazuje na vnější kontext. Musíte na něj uchovat referenci, např.

var self = this;
this.map.addListener('click', function (e) {
 var marker = new google.maps.Marker({
    position: e.latLng,
    map: self.map
  });
  self.map.panTo(e.latLng);
});