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>

然后我在Angular组件中声明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);
  });

}

如何将外部JS小部件集成到angular 2中

1 个答案: