目前我正在尝试在 Angular 2 Typescript 中使用 Google Recaptcha v2。我在注册表格中使用它。假设我有一个包含以下内容的表单:
<form id="signup-form">
<div class="g-recaptcha" data-callback="verifyCallback" data-sitekey="6LetChQTAAAAACq4lmSL0L1-4rv47ZPrFKrkWOLf"></div>
</div>
在我的 Signup 类中,我使用以下代码在名为 displayRecaptcha() 的方法中显示小部件:
displayRecaptcha(){
var doc = <HTMLDivElement>document.getElementById('signup-form');
var script = document.createElement('script');
script.innerHTML = '';
script.src = 'https://www.google.com/recaptcha/api.js';
script.async = true;
script.defer = true;
doc.appendChild(script);
var d = document.createElement('script');
d.innerHTML = `
var verifyCallback() = function(response) {
alert(response);
};`
document.querySelector('head').appendChild(d);
}
使用上面的代码,我能够显示验证码,但我只能使用 Javascript 中定义的 verifyCallback() 运行回调。当我使用 Typescript 时,是否可以使用 Signup 类中定义的方法而不是 Javascript 来运行回调?
最佳答案
我认为您无法将回调引用传递给脚本,但是您可以使用 typescript 随后可以访问的全局变量对其进行修补。
@Component({...})
export class MyComponent{
constructor(){
window['verifyCallback'] = this.verifyCallback.bind(this);
}
displayRecaptcha(){
var doc = <HTMLDivElement>document.getElementById('signup-form');
var script = document.createElement('script');
script.innerHTML = '';
script.src = 'https://www.google.com/recaptcha/api.js';
script.async = true;
script.defer = true;
doc.appendChild(script);
}
verifyCallback(response){
alert(response);
}
}
关于typescript - Angular 2 Recaptcha 2回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34974947/