如何从全局函数访问 angular 组件函数 - 请兼容 IE11

Question

情况是这样的 - 我在基于 angular 的应用程序中使用 Mastercard 支付网关 api。 api 接受成功和错误的回调，回调在脚本标签的数据错误和数据成功属性中传递，以加载万事达卡 api.

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

Details here.

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

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

  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 returns 一个错误。有什么想法吗？

Answer 1

您可以发送一个事件，然后在 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
  }

如何从全局函数访问 angular 组件函数 - 请兼容 IE11

How do I access angular component function from a global function - IE11 compatible please

javascript

typescript

mastercard

angular