重新加载recaptcha2 Angular 6答案

【问题标题】：reload recaptcha2 Angular 6重新加载recaptcha2 Angular 6
【发布时间】：2018-08-19 17:30:59
【问题描述】：

我是 Angular 6 的新手，我在我的注册页面中使用了 recaptcha。提交表单后，我必须重新加载 recaptcha 以重置值，以防您想再次提交。我在表单中使用它：

<ngx-recaptcha2 
    #captchaElem
    (expire)="handleExpire()"
    (load)="handleLoad()"
    (success)="handleSuccess($event)"
    [size]="size"
    [hl]="el"
    [theme]="theme"
    id="captcha"
    name="captcha"
    [type]="type">
</ngx-recaptcha2>

我无法处理 Angular 6 中的重新加载事件。有什么帮助吗？谢谢

【问题讨论】：

遇到同样的问题...

标签： angular forms recaptcha

【解决方案1】：

您应该能够使用ngIf 来实现这一点，因为该指令将在将组件插入 DOM 时物理地重新加载组件。您可以通过修改 ngx-recaptcha2 组件来实现这一点，如下所示：

<ngx-recaptcha2 *ngIf="showCaptcha" ... >

然后将其添加到控制器的顶部：

public showCaptcha = true;

现在在您的handleSuccess() 活动中，执行以下操作：

public handleSuccess() {
    // ... success logic

    // set to false, which removes component from DOM
    this.showCaptcha = false;

    // let the Angular digest run, then set to True again and the component reloads
    setTimeout(() => {
         this.showCaptcha = true;
    });    

    // note: 2nd param of setTimeout left empty since you just need to wait 
    // for the Angular digest, but you can put a value in here if needed to 
    // delay reloading the component
}

您可以采用类似的方法，最好在令牌过期或尝试达到等时抽象到它自己的可调用函数中。

【讨论】：