角6的Primeng验证码问题 [英] Primeng captcha issue with angular 6

问题描述

我正在使用角度为6的 primeng验证码，但我遇到了问题.当我尝试直接加载具有验证码确认的页面时，出现此错误:

I am using primeng captcha with angular 6 and I have an issue. When I try to directly load the page that has captcha confirmation I have this error:

错误TypeError:window.grecaptcha.render不是函数在Captcha.push ../node_modules/primeng/components/captcha/captcha.js.Captcha.init中(captcha.js:42)在Captcha.push ../node_modules/primeng/components/captcha/captcha.js.Captcha.ngAfterViewInit(captcha.js:32)

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中初始化了验证码:

I have only initialized the captcha in my index.html:

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

但是如果我从另一个页面转到该页面，它就可以工作.

But it works if I route to this page from another page.

有什么办法解决吗?

推荐答案

我明白了，所以我要做的就是将 window.grecaptcha 对象附加到我的组件上，然后 *ngif 验证码，直到 grecaptcha.render 成立.检查一下.

I got this, so what I did was to attach the window.grecaptcha object to my component, and then *ngIf the captcha until grecaptcha.render is truthy. Check it.

// 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>

这样做，直到脚本执行并且 grecaptcha 全局变量上存在 render 函数后，验证码组件才会运行.

Doing this, the captcha component won't run until the script has executed and the render functions exists on the grecaptcha global.

干杯.凡发现此问题的人，祝您好运.

Cheers. Best of luck to whoever finds this issue.

这篇关于角6的Primeng验证码问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！