Как интегрировать внешний JS-виджет в угловой 2

Question

У меня есть js-скрипт, который я хочу интегрировать в мое угловое приложение.

<script src="https://static.epayments.com/card-token-widget/cardDataWidget.js">
</script>
<script>
    (function () {
        document.addEventListener('DOMContentLoaded', function () {
            var style = {
                widget: {},
                field: {},
                fieldInput: {},
                fieldInputPlaceholder: {},
                fieldInputControl: {},
                fieldSubmit: {},
                fieldSubmitError: {},
                fieldSubmitButton: {
                    'background': '#000',
                    'hover' : {
                        'background': '#ff546c'
                    }
                }
            };
            var option = {
                root: '#root-widget',
                submitButton: 'submit-button',
                fields: [['number', 'expireDate'], ['embossingName']],
                sid: '123',
                partnerId: '58',
                sign: 'f82a381d1f4ab94d8feb33bd161b6638',
                lang: 'en',
                style: style
            };
            var widget = cardDataWidget.init(option);
            widget.addEventListener('tokenCreateSuccess', function (data) 
{
                
            });
        })
    })()
</script>
<div id="root-widget"></div>
<button id="submit-button">submit</button>

Это моя адаптация.

Я добавил скрипт src в index.html

<script src="https://static.sandbox.epayments.com/card-token-widget/cardDataWidget.js"></script>

Тогда я объявляю varв моем угловом компоненте и добавьте второй скрипт.

declare var cardDataWidget:any;

   ngAfterViewInit() {
    var style = {
      widget: {},
      field: {},
      fieldInput: {},
      fieldInputPlaceholder: {},
      fieldInputControl: {},
      fieldSubmit: {},
      fieldSubmitError: {},
      fieldSubmitButton: {
        'background': '#000',
        'hover' : {
          'background': '#ff546c'
        }
      }
    };
    var option = {
      root: '#root-widget',
      submitButton: 'submit-button',
      fields: [['number', 'expireDate'], ['embossingName']],
      sid: '123',
      partnerId: '123123',
      sign: 'sadasd213123dsasd',
      lang: 'en',
      style: style,
    };
    let widget = cardDataWidget.init(option);
    console.log(widget);
    widget.addEventListener('tokenCreateSuccess', (data) => {
      console.log(data);
    });
  }

Теперь этот код показывает виджет, но я не могу отправить запрос на публикацию с помощью кнопки отправки.(ошибка 400) Так как же преобразовать widget.addEventListener?Я пытался использовать Render2 listen (), но это не работает.

Answer 1

Render2 работает.

ngAfterViewInit() {
  var style = {
    widget: {},
    field: {},
    fieldInput: {},
    fieldInputPlaceholder: {},
    fieldInputControl: {},
    fieldSubmit: {},
    fieldSubmitError: {},
    fieldSubmitButton: {
      'background': '#000',
      'hover' : {
        'background': '#ff546c'
      }
    }
  };
  var option = {
    root: '#root-widget',
    submitButton: 'submit-button',
    fields: [['number', 'expireDate'], ['embossingName']],
    sid: '123',
    partnerId: '58',
    sign: 'f82a381d1f4ab94d8feb33bd161b6638',
    lang: 'en',
    style: style
  };
  var widget = cardDataWidget.init(option);
  this.renderer.listen(widget,'tokenCreateSuccess', function (data)
  {
    console.log(data);
  });

}