Angular 2 不能调用类函数答案

【问题标题】：Angular 2 can't call class functionAngular 2 不能调用类函数
【发布时间】：2016-01-15 09:51:33
【问题描述】：

在我的课堂上，我有一个简单的函数来记录错误，称为 logError(error);

我还使用 google maps api 来获取地址的纬度和经度，所以在我导出的类中，这一切看起来像这样。

  //Log error
  logError(err) {
   console.error('Error: ' + err);
  }

  //Get Coordinates from address
  postcodeCoordinates(address: string, postcode: string) {
    var geocoder =  new google.maps.Geocoder();
    geocoder.geocode( { 'address': address + ', ' + postcode}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log(results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
      } else {
       this.logError("Error " + status);
      }
    });
  }

问题是我得到控制台错误说 Uncaught TypeError: Cannot read property 'logError' of undefined ，但是这个函数工作得很好api，而不是我的课。我该如何解决这个问题？有没有办法实现MyClassName.logError("Error") 之类的东西（试过这个，不行）

【问题讨论】：

标签： javascript google-maps google-maps-api-3 angular

【解决方案1】：

您应该使用箭头函数，this 关键字将用于您的组件，而不是回调函数。类似的东西：

geocoder.geocode( { 'address': address + ', ' + postcode}, (results, status) => {
  if (status == google.maps.GeocoderStatus.OK) {
    console.log(results[0].geometry.location.lat() + " " +results[0].geometry.location.lng());
  } else {
   this.logError("Error " + status);
  }
});

在这种情况下，logError 是您当前类的方法。

为了给你更多细节，当在函数中使用this关键字时，它对应于执行函数的对象：

// Example #1

function test() {
  console.log(this);
}

test(); // prints null

// Example #2

var obj2 = {
  test: function() {
    console.log(this);
  }
};

obj2.test(); // prints obj2

// Example #3

var obj3 = {
  test: function() {
    console.log(this);
  }
}

var fct3 = obj3.test;
fct3() // prints null!!

// Example #4

var obj4 = {
  test: function() {
    geocoder.geocode({ ... }, function(results, status) {
      console.log(this);
    });
  }
};

obj2.test(); // doesn't print obj2

当您提供回调时，它将作为函数在任何对象之外作为上下文或在特定上下文（而不是调用者的上下文）中执行。这意味着在您的回调中，this 关键字对应于您的回调执行的上下文，当然，它不是组件实例。

这是 JavaScript 应用程序中的常见问题。箭头函数不是经典函数，而是引入了“词法 this”概念。这意味着他们不使用自己的this，而是使用来自调用者的@：

var obj2 = {
  test: function() {
    geocoder.geocode({ ... }, (results, status) => {
      console.log(this);
    });
  }
};

obj2.test(); // prints obj2

此链接可以帮助您：https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/。请参阅部分：“功能：词法范围”。

希望对你有帮助蒂埃里

【讨论】：