javascript - typescript truy cập biến toàn cục bên trong listener

Tôi có một dự án Angular 2 và muốn thử nghiệm các trình nghe sự kiện. điều này đã được định nghĩa

map;

sau đó trong một phương thức điền bản đồ tôi có

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

một ngoại lệ được ném ra trong trình lắng nghe của

Uncaught TypeError: Cannot read property 'panTo' of undefined

Có lý do nào khiến JavaScript không thể tìm thấy tham chiếu "this.map" chính xác không, quên nói, đây là Google Maps API v3

Câu trả lời #1

Bạn đang ở bên trong một ngữ cảnh khác và do đó this không tham chiếu đến ngữ cảnh bên ngoài. Bạn phải giữ một tham chiếu tới nó ví dụ như

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