如何在我的組件中傳遞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) {...}