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

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


typescript javascript angular mastercard
person Ali    schedule 04.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете отправить событие, а затем перехватить его в 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>

In AppComponent

@HostListener('document:payment-error', ['$event'])
  paymentError(event){
    //do your work
  }
person Hassan Al Bourji    schedule 04.10.2018
comment
Вау - еще не проверял события - я попробую и вернусь к вам :) - много Angular осталось изучить - person Ali; 04.10.2018
comment
На самом деле это не работает - IE говорит, что объект не поддерживает это действие :( - person Ali; 08.10.2018
comment
Понял - этот полифилл в этом ответе отсортировал его stackoverflow.com/a/26596324/89752 спасибо, что указали мне правильно направление :) Рокстар! - person Ali; 08.10.2018