Angular12(TypeScript)组件中如何引入使用第三方script脚本

Angular默认会过滤模板内的<script>标签，直接将你给出的代码写入组件模板无法生效，可按以下步骤实现：

1. 配置环境变量（可选） #

如果你需要将公钥ENV_PUBLIC_KEY从代码中解耦，可先在Angular环境配置文件中声明：

// src/environments/environment.ts
export const environment = {
  production: false,
  mercadoPagoPublicKey: '替换为你的MercadoPago公钥'
};

2. 编写组件模板 #

在组件模板中声明支付表单，新增模板引用变量方便后续注入脚本：

<!-- payment.component.html -->
<form 
  #paymentForm
  action="https://www.meu-site.com/processar-pagamento" 
  method="POST"
>
</form>

3. 编写组件TypeScript逻辑 #

通过Renderer2动态创建脚本节点注入到表单内，避免直接操作DOM带来的兼容性问题：

// payment.component.ts
import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit, OnDestroy {
  // 绑定模板中的表单引用
  @ViewChild('paymentForm') paymentForm!: ElementRef<HTMLFormElement>;
  private mpScript?: HTMLScriptElement;

  constructor(private renderer: Renderer2) {}

  ngOnInit(): void {
    this.loadMercadoPagoCheckout();
  }

  ngOnDestroy(): void {
    // 组件销毁时移除脚本，避免重复加载、内存泄漏
    if (this.mpScript?.parentNode) {
      this.renderer.removeChild(this.paymentForm.nativeElement, this.mpScript);
    }
  }

  private loadMercadoPagoCheckout(): void {
    // 动态创建script标签
    this.mpScript = this.renderer.createElement('script');
    // 配置脚本属性
    this.renderer.setAttribute(this.mpScript, 'src', 'https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js');
    this.renderer.setAttribute(this.mpScript, 'data-public-key', environment.mercadoPagoPublicKey);
    // 金额支持动态替换，如需修改直接替换后面的固定值即可
    this.renderer.setAttribute(this.mpScript, 'data-transaction-amount', '100.00');
    // 监听脚本加载完成事件（可选）
    this.renderer.listen(this.mpScript, 'load', () => {
      // 可在此处添加脚本加载完成后的自定义逻辑
      console.log('支付脚本加载完成');
    });
    // 将脚本插入到表单内
    this.renderer.appendChild(this.paymentForm.nativeElement, this.mpScript);
  }
}

额外注意事项 #

• 如果项目开启了严格内容安全策略(CSP)，需要将mercadopago.com.br加入到CSP的script-src白名单中，避免脚本被拦截
• 如果你需要全局加载该脚本而非单个组件内按需加载，可将脚本地址添加到angular.json的projects.<你的项目名>.architect.build.options.scripts数组中，适合全站都需要用到该脚本的场景

内容的提问来源于stack exchange，提问作者Gabriel Gonçalves