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

Question

我正在将 PandaPay 添加到我的应用程序中，它与 stripe 非常相似，但可以更轻松地向慈善机构捐款。不幸的是，与 Stripe 不同，他们掩盖了很多服务，他们给出的创建信用卡 token 的唯一示例如下:/image/fV4F8.jpg

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

我可以通过将 javascript 函数放入我的 index.html 中来捕获此问题，但我希望能够在我的注册组件 ts 文件中将其作为 Angular 方法捕获，以便将 token 的内容发送到我的后端。

我应该在我的index.html 中保留这个Panda.on() 方法吗？如果是这样，我如何从标准 JavaScript 函数调用 Angular 函数。

有没有办法让 Panda.on() 触发 Angular 方法？本质上，我不喜欢这种异步调用，因为信用卡标记化是我网站用户注册的一部分。

Answer 1

我认为您在另一个网站上有答案(我正在寻找类似的内容)。

无论如何，对于其他来这里的人，我在 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 的一个很好的资源。

在 ionic 上...

我在 Panda 库发现正确的输入字段时遇到了问题。这是因为<ion-input>是一个包装器，它在运行时创建一个子 <input> field 。属性保留，创建重复的 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 中的第一个 child el: any 的数组参数，'data-panda-对于name: string参数，和'first_name'对于value: string争论。这是针对每个 <ion-input> 完成的引用，带有适当的data-panda value: any 的值论证。

这个解决方案代码量很大，我确信有一种更简洁的方法，或者完全不同的方法来做到这一点。如果是这样，请告诉我。