从组件模板调用 JavaScript答案

【问题标题】：Calling JavaScript from component template从组件模板调用 JavaScript
【发布时间】：2021-11-30 14:26:11
【问题描述】：

我正在通过使用第三方提供的 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>

当我在索引页面上同时使用这三个部分时，当我尝试使用不是的组件模板时工作正常

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

目前尚不清楚您面临什么问题，但我认为您必须在表格后致电<script type="text/javascript" src="http://xxx/tokenPay.js"></script>。尽早这样做，表单可能还不存在

【讨论】：

【解决方案2】：

将脚本标签<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 文件中。

【讨论】：

谢谢，效果很好