在 Angular2 中渲染 Javascript答案

【问题标题】：Render Javascript in Angular2在 Angular2 中渲染 Javascript
【发布时间】：2017-11-10 13:04:17
【问题描述】：

我是 Angular 新手，正在尝试配置贝宝。这是我要使用的 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 中的其他位置？？

谢谢

【问题讨论】：

组件模板中不能有脚本标签。如何添加脚本标签有几个问题+答案。 “渲染”是什么意思？要在网页上显示源代码吗？
渲染是javascript中的一个DOM选择器。我会环顾四周添加脚本标签，看看它是否修复它。

标签： javascript html angular paypal

【解决方案1】：

这里正在工作Plunker

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

declare var paypal: any;

然后你可以在你的 TypeScripts 中使用它。由于此第 3 方脚本将执行一些 rendering，因此将其初始化放在 ngAfterViewInit 生命周期挂钩中可能是个好主意。

【讨论】：

【解决方案2】：

我决定使用另一种方法..（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 按钮和它的所有动态元素变得简单。

【讨论】：

【解决方案3】：

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

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

【讨论】：