angular - Angular 6 的 Primeng 验证码问题

Question

我正在使用 primeng captcha使用 Angular 6，我有一个问题。 当我尝试直接加载具有验证码确认的页面时出现此错误:

ERROR TypeError: window.grecaptcha.render is not a function at Captcha.push../node_modules/primeng/components/captcha/captcha.js.Captcha.init (captcha.js:42) at Captcha.push../node_modules/primeng/components/captcha/captcha.js.Captcha.ngAfterViewInit (captcha.js:32)

我只在 index.html 中初始化了验证码:

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

但如果我从另一个页面路由到这个页面，它会起作用。

有什么解决办法吗？

Answer 1

我知道了，所以我所做的是将 window.grecaptcha 对象附加到我的组件，然后 *ngIf 验证码，直到 grecaptcha.render 是真实的。检查一下。

// In your component
ngOnInit(){
    this.recaptcha = (window as any).grecaptcha;
}

// And then in your template
<ng-container *ngIf="recaptcha.render">
    <p-captcha ...></p-captcha>
</ng-container>

执行此操作后，验证码组件将不会运行，直到脚本已执行且 render 函数存在于 grecaptcha 全局中。

干杯。祝发现此问题的人好运。