时间戳

首页 > 解决方案 > 如何从全局函数访问角度分量函数 - 请与 IE11 兼容

javascript - 如何从全局函数访问角度分量函数 - 请与 IE11 兼容

问题描述

情况是这样的——我正在一个基于角度的应用程序中使用万事达卡支付网关 api。该 api 为成功和错误进行回调，并在 script 标签的 data-error 和 data-success 属性中传递回调以加载 Mastercard api。

<script src="https://eu-gateway.mastercard.com/checkout/version/49/checkout.js" 
        data-error="errorCallback" 
        data-cancel="cancelCallback">
</script>

详情在这里。

我有一个在 Firefox 和 Chrome 中运行良好但在 IE11 中完全失败的解决方案。我已经取消了所有 polyfills 导入的注释，但无论我尝试多少，都没有任何效果。

这是我到目前为止所做的：

  export class AppComponent implements OnInit {
    constructor(private ngZone: NgZone, private router:Router) {
    var _self = this;

    (<any>window).errorPaymentCallback = function(error){
      console.log(error);
    };

    (<any>window).cancelPaymentCallback = function(){
      console.log('cancel');
    };      
}

无论我尝试什么，都不会触发回调，而是 api 返回错误。有任何想法吗？

标签： javascriptangulartypescriptmastercard

解决方案

您可以调度一个事件，然后将其捕获AppComponent

这是你如何做到这一点： 

<script src="https://eu-gateway.mastercard.com/checkout/version/49/checkout.js" 
        data-error="errorCallback" 
        data-cancel="cancelCallback">
</script>

    <script type="text/javascript">
        function errorCallback(error) { document.dispatchEvent(new Event('payment-error', { bubbles: true })); }
        function cancelCallback() { document.dispatchEvent(new Event('payment-error', { bubbles: true })); }
        window.global = window;
      </script>

在AppComponent

@HostListener('document:payment-error', ['$event'])
  paymentError(event){
    //do your work
  }

推荐阅读