Question

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


    declare var thirdPartyLib: any;

接下来，我点击一个按钮点击下面的方法。


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

    processResponse(eventData: any) {...}

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

为了完整起见，我还尝试了以下内容：


    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。 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) {...}

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

1 个答案: