时间戳

首页 > 解决方案 > 从组件模板调用 JavaScript

javascript - 从组件模板调用 JavaScript

问题描述

我正在通过使用他们提供的链接到 Javascript 来整合来自第三方的付款表格。

当我将代码放在 index.html 页面中时，它的工作正常，但是当我将代码移动到组件模板时不起作用，下面是代码的一部分：

这是初始化付款表单的脚本代码：

<script>
    var tokenpay = TokenPay('tokenpay123');

    tokenpay.initialize({
        dataElement: 'card',
        errorElement: 'errorMessage',
        amountElement: 'amount',
        useACH: false,
        //if displaying all 4 fields then useStyles=false, disableZip=false, disableCvv=false
        //if displaying 3 out of 4 fields then useStyles=false, and set disableZip or disableCvv equal to true
        //if displaying 2 out of 4 fields then useStyles=true, disableZip=true, disableCvv=true
        useStyles: false,
        disableZip: true,
        disableCvv: false
    });
    var form = document.getElementById('paymentForm');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        tokenpay.createToken(function(result) {
            alert(result.token)
        }, function(result) {
            console.log("error: " + result);
        });
    });
</script>
  <script type="text/javascript" src="http://xxx/tokenPay.js"></script>
 <form id="paymentForm" action="xxx" method="post" style="margin: 10%;">
       
        <div id="card" style="border: solid 1px lightgray; height: 100px; width: 500px; padding: 20px 10px; border-radius: 10px; margin: 10px 0px;">
        </div>
        <div id="errorMessage" style="margin-bottom: 10px; color: #c0392b;"></div>
        <button type="submit" class="btn btn-default">Submit</button>
        
    </form>

当我在索引页面上同时使用这三部分时，当我尝试使用不是

标签： javascripthtmlangulartypescript

解决方案

将 script 标签<script type="text/javascript" src="http://xxx/tokenPay.js"></script>放在 index.html 中的 head 标签内

然后将var tokenpay = TokenPay('tokenpay123');etc 块放入ngAfterViewInit相关组件（即托管表单的组件）内。然后它应该可以正常工作。

请注意，因为tokenPay它是一个全局变量，TypeScript 编译器将无法识别它，因此您需要添加：

declare const tokenPay: any

在相关组件的 .ts 文件中。

推荐阅读