javascript - 与Angular 2上的PandaPay javascript库集成需要监听Javascript方法。如何用 Angular 方法捕捉到这一点？

我正在将PandaPay添加到我的应用程序中，该应用程序与Stripe非常相似，但更易于向慈善机构捐款。不幸的是，与Stripe不同，它们掩盖了许多服务，并且在此处提供了创建信用卡令牌的唯一示例：http://imgur.com/a/pUhBu

因此，我不能自己传递抄送号等要求，而必须完全按照示例表单中的指定字段类型并导入Panda.js。然后在javascript Panda.on（'success'）函数中捕获成功或失败。

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

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

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

最佳答案

我认为您在另一个网站上有答案（我在搜索类似内容）。

无论如何，对于其他来这里的人，我像往常一样在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>

我正在使用Ionic，因此我的声明已经整理好了，但是here是将javascript库导入Typescript的很好资源。

在离子上...

我遇到了熊猫库发现正确输入字段的问题。这是因为<ion-input>是包装程序，在运行时将创建子<input>字段。这些属性会继续存在，从而为父元素和子元素创建重复的data-panda属性。为了解决这个问题，我做了如下工作：

import { Component, AfterViewInit, Renderer2, ViewChild } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';

declare var Panda: any;

@Component({
    ....
})
export class DonationSetup implements AfterViewInit {
    @ViewChild('fn') fn: any;  // first_name
    @ViewChild('ln') ln: any;  // last_name
    @ViewChild('cc') cc: any;  // credit_card
    @ViewChild('ex') ex: any;  // expiration
    @ViewChild('cv') cv: any;  // cvv

    constructor(private _renderer: Renderer2,
                // Other Ionic stuff) {  }


    ngAfterViewInit() {
        this._renderer.setAttribute(this.fn._elementRef.nativeElement.children[0], 'data-panda', 'first_name');
        this._renderer.setAttribute(this.ln._elementRef.nativeElement.children[0], 'data-panda', 'last_name');
        // Remaining elements
        // ...
        // ...

        Panda.init('my_key', 'panda_cc_form');
        Panda.on('success', (cardToken) => stuff );
        Panda.on('error', (errors) => stuff);
    }
}

我的模板如下所示：

<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>

说明

对于每个<ion-input>字段，我们必须访问子<input>元素并设置data-panda属性，而不必同时将该属性添加到父级。为此，我们将模板引用#fn附加到每个<ion-input>字段（对其他字段使用适当的引用）。

然后，我们使用@ViewChild('fn') fn: any;行访问该引用。
我们使用Renderer2通过其.setAttribute()方法设置属性，为children参数赋予el: any数组中的第一个子元素，为'data-panda-参数赋予name: string，并为'first_name' value: string参数。这是针对每个<ion-input>引用完成的，并为data-panda参数使用适当的value: any值。

这种解决方案需要大量代码，而且我敢肯定有一种更简洁的方法，或者完全可以通过不同的方式来实现。如果是这样，请告诉我。