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

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

我想要你的帮助，如何使用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');
}

为什么它适用于 fat arrow ：

这是从周围环境中获取的（词汇）。因此，你没有   需要bind()或that = this，

使用普通功能，您需要执行bind()或that = this

Answer 2

您的函数onMarkerDrop作为回调传递，其中上下文将更改，this将具有不同的值。发送时使用箭头或绑定以保留上下文。

this.marker.addListener('dragend', this.onMarkerDrop.bind(this));

或

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

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

2 个答案: