angular 2和google maps api的打字稿逻辑问题

Question

我正在尝试创建一个函数来获取位置值以将其传递给使用共享服务的所有组件下面是我的ngOnInit 函数

   this.input = document.getElementById('google_places_ac');
        var autocomplete = new google.maps.places.Autocomplete(this.input, { types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place=autocomplete.getPlace();
           this.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);

         });

问题在于它无法识别 this.setvalue 函数，该函数与我的共享服务或与 this.variable 共享值的任何变量，它的 javascript“this”问题。而且我什至无法让这个函数与我的构造函数一起使用，它在 getElmentById 处引发错误。

有箭头功能的解决方案，但我不知道如何在这种情况下使用它，所以请帮助我..

Answer 1

在place_changed-callback 中，关键字this 指向自动完成实例。

你需要创建一个闭包：

var instance    = this, 
    autocomplete;
instance.input  = document.getElementById('google_places_ac');
autocomplete    = new google.maps.places.Autocomplete(instance.input, { 
                     types: ['(cities)']});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
   var place=this.getPlace();
   instance.setValue(place.address_components[3].long_name,          
                     place.address_components[2].long_name, 
                     place.address_components[1].long_name);
});