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

Question

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

declare var thirdPartyLib: any;

接下来，将按钮的单击绑定到以下方法。

buttonClick() {
        thirdPartyLib.open({
            url: '{url goes here}',
            messageListener: function(eventData) {
                this.processResponse(eventData);
            }
        });
    }

    processResponse(eventData: any) {...}

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

为了完整起见，我还尝试了以下操作：

buttonClick() {
        var myMethod = this.processResponse;
        thirdPartyLib.open({
            url: '{url goes here}',
            messageListener: myMethod
        });
    }

    processResponse(eventData: any) {...}

此方法的问题在于processResponse将服务称为this.someService.whatever(eventData.something); 。 使用此方法会引发相同的错误，但现在会引发this.someService 。

先谢谢您的帮助！

Answer 1

我认为，您有两种选择。

1. 箭头功能

他们将在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) {...}