javascript - 如何在 Typescript Angular 中调用另一个函数内部的函数

Question

我是 Angular 2 的新手。我在 Angular 中写了下面的代码

export class TestClass {

    constructor() {
        this.initMap();
    }

    initMap() {
        this.marker.addListener('dragend', this.onMarkerDrop);
    }

    onMarkerDrop(event) {
        this.functionTwo(); // Getting error this.functionTwo is not a function
    }

    functionTwo() {

    }
}

注意:在问这个问题之前，我在 stackoverflow 中搜索了这些链接

'this.function' is not a function - OO JS

this.function is not a function :typescript

Angular - this.function is not a function

他们说使用箭头函数调用其他成员函数。但我不知道如何在我的代码中实现他们的建议。可能我没有正确理解它们。

我需要你的帮助，如何使用 functionOne() 中的箭头函数调用 this.functionTwo();

感谢您的帮助。

Answer 1

根据您的代码更新，您可以像这样使用它:

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));
// OR
this.marker.addListener('dragend', ($event) => this.onMarkerDrop($event));

---

您的代码将 100% 正常工作:(问题更新前)

functionOne() {
    this.functionTwo(); // Getting error this.functionTwo is not a function
}

functionTwo() {
    alert('function2');
}

请检查以下代码以获得更多说明

functionOne() {
    // this will throw error this.functionTwo is not a function
    setTimeout(function(){ // normal function
        this.functionTwo();  
    })

    // This wont throw the error
    setTimeout(() => { // fat arrow
        this.functionTwo(); // Getting error this.functionTwo is not a function        
    })
}

functionTwo() {
    alert('function2');
}

Why it will work with fat arrow :

this is picked up from surroundings (lexical). Therefore, you don’t need bind() or that = this, anymore.

With Normal function you need to do bind() or that = this