如何从 angular 2 + (razorpay) 的回调内部调用组件函数？

Question

所以我正在尝试从 api 的回调响应中为支付应用程序 razorpay 调用一个函数。我无法使用 'this' 调用组件内的函数，因为它位于处理程序的嵌套函数内。如何从回调 "handler"?

中调用函数 handle_response()

myComponent.ts

var options = {
    "amount": 100, 
    "name": "ABC",
    "currency": "USD",
    "handler": function (response){
        console.log(response);//this returns the expected value
        this.handle_response(response); //does not work as cannot identify 'this'
    }
};
var rzp1 = new this.winRef.nativeWindow.Razorpay(options);
rzp1.open();

handle_response(_response){....}

Answer 1

您想使用函数的 bind 方法或打字稿中的粗箭头语法。可以是：

let options = {
    "amount": 100, 
    "name": "ABC",
    "currency": "USD",
    "handler": function (response){
        console.log(response);//this returns the expected value
        this.handle_response(response); //does not work as cannot identify 'this'
    }.bind(this)
};
let rzp1 = new this.winRef.nativeWindow.Razorpay(options);
rzp1.open();

handle_response(_response){....}

或您可以使用 javascript 箭头功能。阅读更多关于箭头函数的内容 here

let options = {
    "amount": 100, 
    "name": "ABC",
    "currency": "USD",
    "handler": (response) => {
        console.log(response);//this returns the expected value
        this.handle_response(response); //does not work as cannot identify 'this'
    }
};
let rzp1 = new this.winRef.nativeWindow.Razorpay(options);
rzp1.open();

handle_response(_response){....}

Answer 2

您可以将 this 绑定为选项之外的局部变量，然后将其作为局部变量调用，例如：-

var newThis=this;
    var options = {
    "amount": 100, 
    "name": "ABC",
    "currency": "USD",
    "handler": function (response){
        console.log(response);//this returns the expected value
        newThis.handle_response(response); // 'this' works as new this
    }
};
var rzp1 = new this.winRef.nativeWindow.Razorpay(options);
rzp1.open();

如何从 angular 2 + (razorpay) 的回调内部调用组件函数？

How to call a component function from inside a callback for angular 2 + (razorpay)?

callback

angular

razorpay