typescriptアクセスリスナー内のグローバル変数

Question

私はAngular 2プロジェクトを持っており、イベントリスナーをテストしたいと考えています。 これは私が

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

例外が

Uncaught TypeError: Cannot read property 'panTo' of undefined 

のリスナーにスローされるjavascriptをすることができない理由があるのを持っている移入マップ方式で、その後

map; 

を定義しています正しい "this.map"リファレンスを見つけて、忘れてしまいましたが、これはGoogle Maps API v3です

Answer 1

あなたは別のコンテキストの中にいるので、thisは外部コンテキストを参照していません。あなたはそれへの参照を保持する必要があります。

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