javascript - typescript accesarea unei variabile globale în interiorul unui ascultător

Am un proiect Angular 2 și vreau să testez ascultătorii de evenimente. acesta este definit

map;

atunci într-o metodă de populare a hărții am

  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);
}

o excepție este aruncată în ascultătorul lui

Uncaught TypeError: Cannot read property 'panTo' of undefined

Există vreun motiv pentru care JavaScript nu poate găsi referința corectă "this.map", am uitat să menționez, acesta este Google Maps API v3

Răspuns #1

Ești într-un context diferit și, prin urmare, this nu se referă la contextul exterior. Trebuie să păstrezi o referință la acesta, de exemplu.

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);
});