目前我正在尝试在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); }
使用上面的代码,我能够显示recaptcha,但我只能使用在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); } }