はgoogle.maps.event.listenerから私の関数を呼び出し、私のIonic2プロジェクトにページのtypescriptですで書かれた

Question

私のコンポーネントがfollwingの構造を有する：

import { Component, ViewChild, ElementRef } from '@angular/core'; 
... 
declare var google; 

@Component({ 
    selector: 'page-search', 
    templateUrl: 'search.html' 
}) 

export class SearchPage { 
    @ViewChild('map') mapElement: ElementRef; 
    map: any; 
    guideList: Array<Guide>; 
    text: any; 
    lat : any; 
    lon : any; 

    constructor(public navCtrl: NavController, public recoshService: Recosh, public alertCtrl: AlertController) { 
     ... 
    } 

    ngOnInit(){ 
     this.loadMap(); 
    } 

    loadGuides() { 
     ... 
    } 

    setLat(l){ 
     this.recoshService.setLat(l); 
     this.lat = l; 
    } 

    setLon(l){ 
     this.recoshService.setLon(l); 
     this.lon = l; 
    } 

    setPos(lat, lon){ 
     this.setLon(lon); 
     this.setLat(lat); 
     this.loadGuides(); 
    } 

    loadMap(){ 
     ... 

     let marker = new google.maps.Marker({ 
      position: this.map.getCenter(), 
      icon: { 
       path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
       scale: 5, 
       strokeWeight:2, 
       strokeColor:"#B40404" 
      }, 
      draggable:true, 
      map: this.map, 
     }); 

     google.maps.event.addListener(marker, 'dragend', function() { 

      this.setPos(marker.getPosition().lat(),marker.getPosition().lng()); 

     }); 
    } 
} 

しかしgoogle.maps.event.addListener(){..}の内部で、私はsetPos()が内部で宣言到達カント私のSearchPageクラス。どのように私の構造を考慮してこの機能を呼び出すことができますか？

Answer 1

あなたはこのように矢印の機能を使用する必要があります。

google.maps.event.addListener(marker, 'dragend',() => { 
    this.setPos(marker.getPosition().lat(),marker.getPosition().lng()); 
}); 

矢印の機能を使用することにより、thisプロパティが上書きされず、まだコンポーネントインスタンスを参照します。