アングル2：Googleマップのコールバックから未定義のクラスメンバー

Question

Googleマップを使用して2つのアドレス間の距離を取得しようとしています。 親コンポーネントとの距離を出したいです。

私は問題があります。子クラスのいくつかの要素は、その子のGoogleコールバックメソッドでは利用できません。 this.directionsDisplayは未定義になります。 イベントエミッターメンバーも未定義です。

だから、子コンポーネントに私はステップ

イベント・エミッターは、次のようにクラスの頭の中で宣言されているが、以下でください（私は2点間の距離を放出します。）：

@Output() onDirectionSet=new EventEmitter<number>(); 

私はOnInitでも、データを初期化機能

ngOnInit(){ 
    if (AppDefinitions.isOffline) 
     return; 
     this.directionsDisplay = new google.maps.DirectionsRenderer(); 
     this.map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeControl: false, 
      center: {lat: 50.979571, lng: 10.314687}, 
      zoom: 5 
     }); 
    } 

、その後、私は次の関数を使用して方向を設定しています：

ここ this.from_addressと this.to_addressが未定義のクラスのメンバ this.directionsDisplayについてコンソールからコンポーネント入力

ngOnChanges(changes: {[propKey: string]: SimpleChange}) { 
    if (this.from_address!==undefined && this.to_address!==undefined) 
     this.setDirection(this.from_address, this.to_address); 
    } 

エラーがあるさ：

 setDirection(origin:string, destination:string){ 
      this.directionsService = new google.maps.DirectionsService(); 

      if (AppDefinitions.isOffline) 
      return; 

      this.directionsService.route({ 
       origin: origin, 
       destination: destination, 
       travelMode: 'DRIVING' 
      }, 
/*google callback*/ 
      function(response:any, status:any){ 
       console.log(this.directionsDisplay); 
       this.directionsDisplay.setMap(this.map); 

       if (status === 'OK') { 
         this.directionsDisplay.setDirections(response); 
         var directionsModel = new DirectionsModel; 
         directionsModel.distance = response.routes[0].legs[0].distance.value; 
         console.log('distance:'+directionsModel.distance); 
         this.onDirectionSet.emit(directionsModel.distance); 
       } else { 
         window.alert('Directions request failed due to ' + status); 
       } 
      }); 
     } 

私はsetDirectionFunctionngOnChangesに呼び出しています

error

Answer 1

コンテキストあなたのr googleコールバックは未定義です。矢印関数を使用してコールバック関数をアタッチするか、コンテキストをコールバック関数にバインドすることができます。

this.directionsService.route({ 
      origin: origin, 
      destination: destination, 
      travelMode: 'DRIVING' 
     }, 
     /*google callback - use arrow function*/ 
     (response:any, status:any) => { 
      console.log(this.directionsDisplay); 
      this.directionsDisplay.setMap(this.map); 

      if (status === 'OK') { 
        this.directionsDisplay.setDirections(response); 
        var directionsModel = new DirectionsModel; 
        directionsModel.distance = response.routes[0].legs[0].distance.value; 
        console.log('distance:'+directionsModel.distance); 
        this.onDirectionSet.emit(directionsModel.distance); 
      } else { 
        window.alert('Directions request failed due to ' + status); 
      } 
     });