javascript - 如何在 Angular 2 项目中使用脚本标签

Question

考虑以下代码:

<script type="text/javascript" src="https://checkout.epayco.co/checkout.js"></script>

var handler = ePayco.checkout.configure({
  key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  test: true
});
var data = {
  //Payment parameters
  name: "T-shirt",
  description: "Blue fit",
  invoice: "1234",
  currency: "cop",
  amount: "12000",
  tax_base: "0",
  tax: "0",
  country: "co",
  lang: "en",

  //Onpage="false" - Standard="true"
  external: "true"
};

handler.open(data);

前面的代码是与支付网关集成，通过脚本发送购买信息。

如何在 Angular 2 应用程序中使用此代码，因为在普通的 HTML5 页面中很容易使用脚本标记，但在 Angular 项目中我想了解它的使用方式和工作原理。

Answer 1

首选方法是将库作为 npm 包使用。但我找不到(如果存在的话)。

“在 Angular 中”使用它。将脚本标签添加到 index.html

<script type="text/javascript" src="<https://checkout.passpayment.co/checkout.js>"></script>

您可以考虑动态加载脚本标记，而不是将其包含在 index.html

我建议将其放入 Angular 服务中，而不是直接放入组件中。

EPayco服务

import { Injectable } from '@angular/core';

declare var ePayco;
@Injectable()
export class EPaycoService {

    handler = ePayco.checkout.configure({
        key: 'XXXXXXXXX',
        test: true
    })

    open(data) {
        this.handler.open(data)
    }
}

在您的组件中:

@Component({
    //...
})
export class MyComponent {
    constructor(private ePaycoService: EPaycoService)

    makePayment() {
        const data = {
          //Payment parameters
          name: "T-shirt",
          description: "Blue fit",
          invoice: "1234",
          currency: "cop",
          amount: "12000",
          tax_base: "0",
          tax: "0",
          country: "co",
          lang: "en",

          //Onpage="false" - Standard="true"
          external: "true"
        }

        this.ePaycoService.open(data)
    }
}