Question

<f:view locale="nl">
  <h:outputText value="#{now}">
    <f:convertDateTime pattern="EEEEE dd MMMMM yyyy"/>
  </h:outputText>
</f:view>

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

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

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

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

1 个答案: