从组件模板调用JavaScript

Question

我正在整合来自第三方的支付表单，通过使用他们提供的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>

当我在索引页上一起使用这三部分时，当我试图从非

的组件模板中工作时，工作得很好

Answer 1

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

然后将var tokenpay = TokenPay('tokenpay123');等块放在相关组件(即承载表单的组件)的ngAfterViewInit内。那应该没问题。

注意，因为tokenPay是一个全局变量，TypeScript编译器不会识别它，所以你需要添加:

declare const tokenPay: any

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