Angular 4中无法执行PayPal Banner脚本问题求助

我完全懂你的困扰——Angular的模板编译器会自动移除<script>标签，这是它内置的安全防护机制，用来避免潜在的XSS攻击。不过咱们可以通过动态创建脚本元素的方式绕开这个限制，下面是具体的实现方案：

核心思路 #

Angular允许我们用官方推荐的Renderer2工具在组件生命周期里动态生成并插入脚本，这种方式创建的脚本不会被模板编译器过滤掉，还能保持Angular项目的代码规范。

具体实现代码 #

在你的组件类中，注入Renderer2和ElementRef，然后在ngOnInit钩子中完成PayPal脚本的创建与插入：

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-paypal-banner',
  templateUrl: './paypal-banner.component.html',
  styleUrls: ['./paypal-banner.component.css']
})
export class PayPalBannerComponent implements OnInit {

  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ) { }

  ngOnInit(): void {
    // 1. 创建script元素
    const paypalScript = this.renderer.createElement('script');
    paypalScript.type = 'text/javascript';

    // 2. 设置PayPal要求的专属data属性
    paypalScript.setAttribute('data-pp-payerid', 'XXXXXXXXXX');
    paypalScript.setAttribute('data-pp-placementtype', '728x90');
    paypalScript.setAttribute('data-pp-style', 'BLUWHTYLRG');

    // 3. 写入PayPal的初始化逻辑代码
    paypalScript.text = `(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"));`;

    // 4. 将脚本添加到组件的宿主元素中（也可以选择插入到body标签内）
    this.renderer.appendChild(this.el.nativeElement, paypalScript);
  }

}

额外小贴士 #

• 如果需要在多个组件里复用这个PayPal横幅，可以把这段逻辑封装成自定义指令或者公共服务，更贴合Angular的组件化复用思想。
• 记得把代码里的XXXXXXXXXX替换成你实际的PayPal payer ID，不然横幅没法正常加载。
• 测试时留意网络环境，确保能正常访问PayPal的脚本资源。

内容的提问来源于stack exchange，提问作者Parnab Sanyal