Question

我正在使用 Angular 6创建网站。

我已经使用 router-outlet路由了整个网站。

我有5页，这5页中有3页有联系表。所有页面都包含相同的确切形式。

我的问题是，当我第一次加载网站reCAPTCHA v2时，它运行正常，但是当我通过导航切换到另一个页面时，除非我单击刷新以重新加载整个页面，否则reCAPTCHA v2甚至不会出现。 em>在页面上运行后，如果我再次刷新而没有刷新页面，则无法使用，我遇到了同样的问题。当我完全刷新页面时，reCAPTCHA v2似乎才响应。

我如何在单页应用程序中解决此问题？

我想在多个页面中使用相同的表单而不刷新页面。

Answer 1

这似乎是Recaptcha google on angular 6 implementation

的副本

话虽如此，根据您的实现方式，您可以使用很多npm / yarn模块：

https://www.npmjs.com/search?q=angular%20recaptcha

https://yarnpkg.com/en/packages?q=angular%20recaptcha&p=1

大多数软件包都包含说明，因此您应该没事。如果您采用直接实现的方法，则可以在表单中添加自定义验证器，然后让Angular负责其余的工作：

function recaptchaValidator(control: FormControl): { [res: any]: boolean } {
    if (addYourServerSideLogicHere(control)) {
        return {validCaptcha: true};
    }
}

自定义验证器在网络上也有详细记录...我建议从一个简单的布尔验证器开始，并从那里开始建立您的知识。

关于如何实现此功能的文章也很多，例如：

https://netbasal.com/how-to-integrate-recaptcha-in-your-angular-forms-400c43344d5c

希望这对您有所帮助，并祝您编程愉快！

Angular 6-更换页面时reCAPTCHA v2不起作用

1 个答案: