![](/img/trans.png)
[英]Render angular2 Component from javascript and get html in return
[英]Render Javascript in Angular2
我是新来的有角度的人,正在尝试配置贝宝。 这是我要使用的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中的其他位置?
谢谢
这里正在Plunker
当您在HTML页面中将JavaScript作为script
包含时,您不能简单地import
内容(在本例中为PayPal API)。 但是一旦完成,浏览器将在页面加载时加载该脚本。 根据文档示例,据说在脚本加载后,全局paypal
对象将可用。 要使用Angular之前可用或不受Angular管理的全局对象,我们可以像下面这样破解它:
declare var paypal: any;
然后,您可以在TypeScript中使用它。 由于此第三方脚本将进行一些rendering
,因此最好将其初始化放在ngAfterViewInit
生命周期挂钩中。
我决定使用另一种方法..(angular2中的paypal 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>
这使得贝宝按钮及其所有动态元素变得容易。
默认情况下,Angular会删除html中除index.html之外的所有脚本。 您可以在index.html中添加脚本,也可以使用Renderer2动态添加。
可以在这里找到类似的方法: http : //tphangout.com/angular-5-paypal-express-checkout/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.