angular - 无法在 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可注入(inject)，以及 Render2服务，使其支持服务器端渲染。