角2不能调用类的函数 [英] Angular 2 can't call class function

问题描述

我的课里面我有一个记录错误名为 LOGERROR（错误）一个简单的功能;

inside my class I have a simple function that logs errors called logError(error);

我也使用谷歌地图API来抓住一个地址的经纬度，所以都在一起，这看起来像这样我的出口类中。

I also use google maps api to grab latitude and longitude of an address, so all together this looks like this inside my exported class.

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

问题是，我得到控制台错误说未捕获类型错误：无法读取的不确定，但此功能完全正常从其他相同的方式调用的财产LOGERROR在code，这使我的东西的地方是这个在 this.logError（错误+状态）; refferes谷歌地图API，而不是我的课。我该如何解决此问题？有没有办法实现类似 MyClassName.logError（错误）（试过，不工作）

The issue is that I get console error saying Uncaught TypeError: Cannot read property 'logError' of undefined , but this function works perfectly fine called in a same way from other places in the code, which makes me thing that this in this.logError("Error " + status); refferes to google maps api, instead of my class. How can I work around this? is there a way to achieve something like MyClassName.logError("Error") (Tried this, doesn't work)

推荐答案

您应该用一个箭头的功能，这个关键字会的一个组件，而不是一的回调函数。这样的事情：

You should use an arrow function, the this keyword will the one for your component and not the one of the callback function. Something like that:

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 是当前类的方法。

In this case, logError is a method of your current class.

给你更多的细节，当使用函数中的这个关键字，它对应的功能上执行的对象：

To give you more details, when using the this keyword in a function, it corresponds to the object the function is executed on:

// 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

当你提供的回调，它将作为一个功能的任何物体之外执行作为上下文或与特定上下文（而不是调用者之一）。这意味着，你的回调中的将此关键字对应于您的回调并确保执行的背景下，它不是组件实例。

When you provide a callback, it will be executed as a function outside any object as a context or with a specific context (and not the caller one). This means that inside your callback the this keyword corresponds to the context your callback is executed on and sure, it's not the component instance.

这是在JavaScript应用的常见问题。箭功能都没有经典功能，并介绍了这个词的概念。这意味着，他们不使用自己的将此，但使用来自调用者之一：

It's a common problem in JavaScript application. Arrow functions aren't classical functions and introduce the "lexical this" concept. This means that they don't use their own this but use the one from the caller:

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

obj2.test(); // prints obj2

这个链接可以帮助你： https://toddmotto.com / ES6-箭头功能，语法和词法 - 作用域/ 。见：功能性：词法范围这个

This link could help you: https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/. See the section: "Functionality: lexical scoping this".

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于角2不能调用类的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！