Question

我是Angle 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>

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

Answer 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
}

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

重新加载recaptcha2 Angular 6

1 个答案: