Как получить доступ к функции углового компонента из глобальной функции - совместим с IE11, пожалуйста

Question

Вот ситуация - я работаю с API платежного шлюза Mastercard в угловом приложении.API принимает обратный вызов для успеха и ошибки, и обратный вызов передается в атрибутах data-error и data-success тега script для загрузки API-интерфейса Mastercard.

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

Подробности здесь .

У меня есть решение, которое довольно хорошо работает в Firefox и Chrome, но абсолютно не работает в IE11.Я раскомментировал весь импорт полифилов, но ничего не работает, сколько бы я ни пытался.

Вот что я сделал до сих пор:

  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 возвращает ошибку.Есть идеи?

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
  }