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

【问题标题】：How can I pass an Angular2 method in my component as the callback method of a third party library?如何将组件中的 Angular2 方法作为第三方库的回调方法传递？
【发布时间】：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。

提前感谢您的帮助！

【问题讨论】：

标签： angular typescript

【解决方案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) {...}

【讨论】：