无法在 Angular 4 中执行 PayPal 横幅脚本

Question

我正在尝试将 PayPal 横幅集成到我的 Angular 4 应用程序中。 我有这个下面的脚本。

<script type="text/javascript" data-pp-payerid="XXXXXXXXXX" data-pp-placementtype="728x90" data-pp-style="BLUWHTYLRG">
    (function (d, t) {
        "use strict";
        var s = d.getElementsByTagName(t)[0], n = d.createElement(t);
      n.src="//www.paypalobjects.com/upstream/bizcomponents/js/merchant.js";
        s.parentNode.insertBefore(n, s);
    }(document, "script"));
</script>

如果仅放置在 body 标记中，此代码运行良好，但从任何组件中它都不起作用，因为 Angular 正在从模板正文中删除 script 标记。请帮忙

Answer 1

我不确定您为什么不能在组件中使用 <script>，但这很可能是出于安全或 AoT 的原因。无论哪种方式，这对于 Angular 组件都是一种不好的做法。

我没有真正的解决方案，但这是我会尝试的。

在组件的模板中添加一个元素来保存属性数据，并给它一个#target 引用。

<span #target data-pp-payerid="XXXXXXXXXX" data-pp-placementtype="728x90" data-pp-style="BLUWHTYLRG">

您现在可以通过 @ViewChild 属性访问该 DOM 元素。

@ViewChild('target')
public target: ElementRef;

现在您只需插入一个<script> 元素即可加载merchant.js。

public OnInit() {
    const n = document.createElement('script');
    n.src="//www.paypalobjects.com/upstream/bizcomponents/js/merchant.js";
    this.target.nativeElement.appendChild(n);
}

我不确定这是否可行。我不明白merchant.js 如何从 DOM 中的父节点读取属性。加载脚本时，它没有对加载它的原始 <script> 标记的引用。

编辑：

此答案可以更新为使用 Document 可注入和 Render2 服务，以便支持服务器端呈现。