如何使用打字稿在angular 2组件中编写以下代码 [英] how to write the below code in angular 2 component using typescript

问题描述

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文件中调用此函数

how to implement the above code in angular 2 component and call this function in the component html file by adding the paypal button in div

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

推荐答案

我不确定您在想什么-您是否想要一个带有按钮的组件，并使用paypal.Button.render将该函数绑定到该组件?公平地说，我不熟悉)?

I'm not sure what is on your mind - do you want to have a component with button inside and bind the functions to it with paypal.Button.render (which I'm not familiar with to be fair)?

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

You can create PaypalButtonComponent and call this render action on ngOnInit (you must implement OnInit from @angular/core). I've written the following example:

    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指针的组件方法.希望这会有所帮助.

I've created mock paypal.Button.render method that mimics the desired activity and implemented two buttons: one with plain function passed and second, where I passed components method with proper this pointer. Hope this helps.

这篇关于如何使用打字稿在angular 2组件中编写以下代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！