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

Posted 2023-03-13

【中文标题】如何在 Typescript Angular 的另一个函数中调用一个函数

【英文标题】：How to call a function inside another function in Typescript Angular

【发布时间】：2018-07-27 00:37:19

【问题描述】：

我是 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() 

    

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

'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();

感谢您的帮助。

【问题讨论】：

这将 100% 正常工作，应该有比这段代码更多的东西

这么多代码肯定可以工作。提供更多细节。

您将函数作为回调发送.. 使用绑定。 this.marker.addListener('dragend', this.onMarkerDrop.bind(this));

您好 VivekDoshi 和 Arun Raj R，感谢您的回复。我已经更新了我的代码，请检查一次。实际上在 onMarkerDrop() 上的函数中我得到了那个错误。

【参考方案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

【讨论】：

嗨@Vivek Doshi，谢谢您的回答。但我已经更新了我的问题。请检查一次。

@VivekDoshi 您的箭头函数示例不正确

【参考方案2】：

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

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

或

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