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');

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>

回答1:

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

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');
        }
    }

EDIT: https://plnkr.co/edit/qaxBsnEcIPnD8oWFMj6z (check src/app.ts)

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.

来源：https://stackoverflow.com/questions/43887543/how-to-write-the-below-code-in-angular-2-component-using-typescript