如何使用打字稿在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屋!