如何将组件中的 Angular2 方法作为第三方库的回调方法传递？

Posted 2023-02-19

【中文标题】如何将组件中的 Angular2 方法作为第三方库的回调方法传递？

【英文标题】：How can I pass an Angular2 method in my component as the callback method of a third party library?

【发布时间】：2018-03-22 16:07:21

【问题描述】：

我有一个引用第三方库的 Angular2 应用程序。我通过以下方式在我的一个组件中引用该库：

声明 var thirdPartyLib: any;

接下来我将按钮的点击绑定到下面的方法。

按钮点击（） 第三方库.open( url: 'url 在这里', 消息监听器：函数（事件数据） this.processResponse(eventData); ); 过程响应（事件数据：任何）...

问题是，当它触发 messageListener 函数时，我收到一个错误，它“无法读取未定义的属性 processResponse”。我知道“this”的范围存在问题，但是如何从该函数中调用我的组件上的该方法？还是有另一种方法可以完全做这样的事情？

为了完整起见，我还尝试了以下方法：

按钮点击（） var myMethod = this.processResponse; 第三方库.open( url: 'url 在这里', 消息监听器：我的方法 ); 过程响应（事件数据：任何）...

这种方法的问题是processResponse 调用一个服务为this.someService.whatever(eventData.something);。使用这种方法会引发同样的错误，但现在是 this.someService。

提前感谢您的帮助！

【参考方案1】：

我认为，你有两个选择。

1. Arrow functions

它们将保留对this 中当前对象的引用。

buttonClick() 
    thirdPartyLib.open(
        url: 'url goes here',
        messageListener: (eventData) => 
            this.processResponse(eventData);
        
    );


processResponse(eventData: any) ...

甚至更短的形式：messageListener: eventData => this.processResponse(eventData)

2。 “那个”模式

that（或其他名称）变量可能持有对当前对象的引用。

buttonClick() 
    const that = this;
    thirdPartyLib.open(
        url: 'url goes here',
        messageListener: function(eventData) 
            that.processResponse(eventData);
        
    );


processResponse(eventData: any) ...