在Angular2中渲染Javascript

Question

我是新來的有角度的人，正在嘗試配置貝寶。 這是我要使用的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中的其他位置？

謝謝

Answer 1

這里正在Plunker

當您在HTML頁面中將JavaScript作為script包含時，您不能簡單地import內容（在本例中為PayPal API）。 但是一旦完成，瀏覽器將在頁面加載時加載該腳本。 根據文檔示例，據說在腳本加載后，全局paypal對象將可用。 要使用Angular之前可用或不受Angular管理的全局對象，我們可以像下面這樣破解它：

declare var paypal: any;

然后，您可以在TypeScript中使用它。 由於此第三方腳本將進行一些rendering ，因此最好將其初始化放在ngAfterViewInit生命周期掛鈎中。

Answer 2

我決定使用另一種方法..（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>

這使得貝寶按鈕及其所有動態元素變得容易。

Answer 3

默認情況下，Angular會刪除html中除index.html之外的所有腳本。 您可以在index.html中添加腳本，也可以使用Renderer2動態添加。

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