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标记内放置此代码，但该代码无法正常工作，因为角度正在从模板正文中删除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服务，以便它支持服务器端呈现。

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

1 个答案: