如何使用打字稿在 Angular 2 组件中编写以下代码答案

【问题标题】：how to write the below code in angular 2 component using typescript如何使用打字稿在 Angular 2 组件中编写以下代码
【发布时间】：2017-05-10 08:44:41
【问题描述】：

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>

【问题讨论】：

标签： angular typescript button paypal

【解决方案1】：

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

您可以创建 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 指针传递了组件方法。希望这会有所帮助。

【讨论】：

您好，感谢您的回复。但是我想在一个 Angular 2 组件打字稿中添加该 java 脚本，并且该按钮应该呈现并转到贝宝网站以进行进一步付款，并且在交易后它应该返回主页。我无法在 Angular 2 中集成快速结帐按钮并呈现该按钮并继续访问贝宝沙盒站点。请帮帮我。谢谢。