如何在 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 頁面中很容易使用 script 標簽，但在 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)
    }
}