在Angular2中渲染Javascript

时间:2017-06-08 17:24:42

标签: javascript html angular paypal

我是角色的新手,我正在尝试配置paypal。这是我想要使用的JavaScript。

https://developer.paypal.com/demo/checkout/#/pattern/client

当我将脚本主体粘贴到html中时,没有任何内容出现。

我试着将脚本放在ng-onit函数中,但我不确定该怎么做..

component.js

    ngOnInit = function () 
    {
    paypal.Button.render({

        ...

HTML

  <script src="https://www.paypalobjects.com/api/checkout.js"></script>
 div id="paypal-button-container"></div

我想将脚本引用放在component.js中的其他地方吗?

由于

3 个答案:

答案 0 :(得分:0)

这是有效的Plunker

当您在HTML页面中将JavaScript包含为import时,您不能简单地script填充(在本例中为PayPal API)。但是一旦你这样做,浏览器将在加载页面时加载该脚本。根据文档示例,据说在加载脚本后,全局paypal对象将可用。要使用之前可用或不受Angular管理的全局对象,我们可以像以下一样破解:

declare var paypal: any;

然后您可以在TypeScripts中使用它。由于此第三方脚本将执行一些rendering,因此最好将其初始化放在ngAfterViewInit生命周期钩子中。

答案 1 :(得分:0)

我决定使用另一种方法..(paypal in angular2 https://github.com/musale/angular2-paypal

<form #form class="form-inline" name="_xclick" 
action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="mmusale93@gmail.com">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="Paypal demo charge">
<input name="item_number" type="hidden" value="0001"/>
<input type="text" class="form-control" size="30" id="paypalAmount" name="amount"/>
<input type="hidden" name="return" value="https://localhost:4200/" />
<input type="hidden" name="cancel_return" value="https://localhost:4200/" />
<input type="hidden" name="custom" value={{title}}>
<!--pass your notification URL-->
<input name="notify_url" value="YOUR NOTIFICATION URL" type="hidden"><br/>
<br/>
<input (click)="form.submit()" type="image" 
src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0"
            name="submit" alt="Make payments with PayPal - it's fast, free 
and secure!"/>
</form>

这使得paypal按钮及其所有动态元素变得容易。

答案 2 :(得分:0)

默认情况下,Angular会删除html中除index.html之外的所有脚本。 您可以将脚本添加到index.html中,也可以使用Renderer2动态添加。

可以在这里找到类似的方法:http://tphangout.com/angular-5-paypal-express-checkout/