Angular 6 - reCAPTCHA v2 не работает при смене страниц - PullRequest
Новая
       6

Angular 6 - reCAPTCHA v2 не работает при смене страниц

0 голосов
/ 11 сентября 2018

Я создаю сайт, используя Angular 6.

Я переправил весь мой сайт, используя router-outlet.

У меня есть 5 страниц, и из этих 5 страниц на 3 страницах есть контактная форма. Все страницы содержат одинаковую точную форму.

Моя проблема в том, что при первой загрузке веб-сайта reCAPTCHA v2 работает отлично, но когда я переключаюсь на другую страницу с помощью навигации, reCAPTCHA v2 даже не появляется, если я не перезагружаю всю страницу, нажимая кнопку обновить. Как только он работает на странице, он не работал, когда я меняю страницы без обновления снова, я получаю ту же проблему. reCAPTCHA v2, кажется, отвечает только тогда, когда я полностью обновляю страницу.

Как бы я решил эту проблему в одностраничном приложении?

Я хочу иметь одну и ту же форму на нескольких страницах без обновления страницы.

1 Ответ

0 голосов
/ 11 сентября 2018

Похоже, что это дубликат Recaptcha Google на угловой реализации 6

При этом, в зависимости от того, как вы реализуете, вы можете использовать множество модулей 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

Надеюсь, это поможет и удачного кодирования!

...