angular - 如何使用 typescript 在 Angular 2 组件中编写以下代码

Question

paypal.Button.render({

        env: 'sandbox', // Or 'sandbox',

        commit: true, // Show a 'Pay Now' button

        payment: function() {
            // Set up the payment here
        },

        onAuthorize: function(data, actions) {
            // Execute the payment here
       }

    }, '#paypal-button');

如何在angular 2组件中实现上述代码，并通过在div中添加paypal按钮，在组件html文件中调用此函数

<div id="paypal-button"></div>

Answer 1

我不确定你在想什么 - 你想要一个内部带有按钮的组件并使用 paypal.Button.render 将功能绑定(bind)到它吗(我不熟悉公平地说)？

您可以创建 PaypalButtonComponent 并在 ngOnInit 上调用此渲染操作(您必须从 @angular/core 实现 OnInit)。我写了下面的例子:

    import { Component, OnInit } from 'angular2/core';

    @Component({
        selector: 'paypal-button',
        template: `<div id="paypal-button">Button</div>`
    })
    export class PaypalButtonComponent implements OnInit {
        public ngOnInit(): void {
            (window as any).paypal.Button.render({

                env: 'sandbox', // Or 'sandbox',

                commit: true, // Show a 'Pay Now' button

                payment: function () {
                    // Set up the payment here
                },

                onAuthorize: function (data, actions) {
                    // Execute the payment here
                }

            }, '#paypal-button');
        }
    }

编辑:https://plnkr.co/edit/qaxBsnEcIPnD8oWFMj6z (检查 src/app.ts)

我创建了模仿所需事件的模拟 paypal.Button.render 方法并实现了两个按钮:一个传递了普通函数，第二个传递了带有适当 this 的组件方法 指针。希望这会有所帮助。