在Angular 2上集成PandaPay javascript库需要监听javascript方法。如何用角度法捕捉这个？

我正在将PandaPay添加到我的应用程序中，它与stripe非常相似，但更容易向慈善机构捐款。不幸的是，与Stripe不同，它们掩盖了许多服务，它们给出的创建信用卡代币的唯一示例如下：

因此，我不需要自己发送请求，而是需要输入cc号等。我必须严格按照示例表单中的字段类型指定字段类型，然后导入Panda.js。然后在javascript Panda.on（'success'）函数中捕获成功或失败

我可以通过在index.html中放置javascript函数来捕获它，但我希望能够在注册组件ts文件中捕获它，作为一种角度方法，以便将令牌的内容发送到我的后端

我应该在index.html中保留这个Panda.on（）方法吗？如果是这样，我如何从标准javascript函数调用角度函数

---

有没有办法让Panda.on（）触发angular方法？本质上我不喜欢这个异步调用，因为信用卡令牌化是我网站用户注册的一部分。

我想你在另一个网站上找到了答案（我在搜索类似的东西）

无论如何，对于其他来到这里的人，我像平常一样在

index.html

中获取了PandaPay js，我的组件如下所示：

import { Component, AfterViewInit } from '@angular/core';

declare var Panda: any;

@Component({
    ....
})
export class DonationSetup implements AfterViewInit {
    constructor(...) {  }

    ngAfterViewInit() {
        Panda.init('my_key', 'panda_cc_form');
        Panda.on('success', (cardToken) => {
            console.log(cardToken);
            // Do stuff with the token here
        });
        Panda.on('error', (errors) => {
            console.log(errors);
            // Do stuff with errors here
        });
    }
}

<form id="panda_cc_form">
    <div>
        <label>First Name</label>
        <input type="text" data-panda="first_name">
    </div>

    <!-- Remaining input fields and submit button -->
</form>

您的模板可以如下所示：

import { Component, AfterViewInit } from '@angular/core';

declare var Panda: any;

@Component({
    ....
})
export class DonationSetup implements AfterViewInit {
    constructor(...) {  }

    ngAfterViewInit() {
        Panda.init('my_key', 'panda_cc_form');
        Panda.on('success', (cardToken) => {
            console.log(cardToken);
            // Do stuff with the token here
        });
        Panda.on('error', (errors) => {
            console.log(errors);
            // Do stuff with errors here
        });
    }
}

<form id="panda_cc_form">
    <div>
        <label>First Name</label>
        <input type="text" data-panda="first_name">
    </div>

    <!-- Remaining input fields and submit button -->
</form>

我的模板如下所示：

<ion-content>
    <form id="panda_cc_form">
        <ion-list>
            <ion-item>
                <ion-label floating>First Name</ion-label>
                <ion-input type="text" #fn ></ion-input>
            </ion-item>

            <!-- remaining input fields and submit button -->
        </ion-list>
    </form>
</ion-content>

名字

解释 对于每个

字段，我们必须访问子

元素并设置

数据panda

属性，而无需将属性添加到父元素。为此，我们将模板引用

#fn

附加到每个

字段（使用其他字段的适当引用）

然后我们使用

@ViewChild（'fn'）fn:any访问该引用行。
我们使用
Renderer2
使用其
.setAttribute（）
方法设置属性，为
el:any
参数指定
'data-panda-
数组中的第一个子项，
name:string
参数指定
'first\u name'
值：string

参数指定

'first\u name'

。这是为每个

引用完成的，并为

值：any

参数使用适当的

数据熊猫

值

这个解决方案有点代码密集，我相信有一种更简洁的方法，或者完全不同的方法来实现这一点。如果有，请告诉我