Блог

Главная - Вопросы по программированию - Google reCAPTCHA не отображается в приложении Angular 2

Google reCAPTCHA не отображается в приложении Angular 2

#javascript #html #css #angular #recaptcha

#javascript #HTML #css #angular #recaptcha

Вопрос:

Я пытаюсь использовать Google reCAPTCHA в приложении Angular 2. При настройке, как описано в документации, диалоговое окно reCAPTCHA будет отображаться, если тег g-recaptcha находится на главной HTML-странице, но не будет отображаться, если в каких-либо компонентах (будь то основной компонент приложения, подкомпонент и т.д.)

Этот reCAPTCHA работает нормально

 <body>
  <div class="g-recaptcha" data-sitekey="your_site_key"></div>
</body>

Но следующее не будет отображаться

 @Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div class="g-recaptcha" data-sitekey="your_site_key"></div>
  `,
})

Я вижу в инструментах разработчика Chrome, что, когда reCAPTCHA присутствует в HTML, он имеет допустимые размеры (654×78)

введите описание изображения здесь

Но при визуализации в компоненте размеры недопустимы (654×0).

введите описание изображения здесь

У меня есть плунжер, показывающий проблему здесь — https://plnkr.co/edoI5Hiydkfwiyggps3e

Я попытался добавить свой собственный класс CSS в div, увеличив высоту, но по-прежнему ничего не показывает. Я также пробовал различные стили CSS, чтобы попытаться преобразовать div, а также установить компактный стиль.

В консоли нет выходных данных о каких-либо ошибках или каких-либо указаний на то, что изменяется.

Есть идеи, что в Angular 2 может привести к сбою свойств?

Спасибо

Ответ №1:

Если вы хотите использовать Google-recaptcha, вы должны использовать директиву с именем angular2-google-recaptcha . Вы можете найти его здесь с подробными инструкциями по его установке и реализации. Что касается того, почему код, который работает в index.html , не будет работать в компоненте Angular 2, это потому, что Angular 2 отображает свой HTML-шаблон совершенно другим способом. Это не единственная height проблема, как вы подумали, проверьте разницу между этими двумя:

Комментарии:

1. Спасибо, связанный проект немного устарел, но перенесен и работает нормально.