Google reCaptcha 未显示在 Angular 2 应用程序中答案

【问题标题】：Google reCaptcha not showing in Angular 2 appGoogle reCaptcha 未显示在 Angular 2 应用程序中
【发布时间】：2017-03-04 07:13:51
【问题描述】：

我正在尝试在 Angular 2 应用程序中使用 Google reCaptcha。按照文档中的描述进行设置，如果 g-recaptcha 标签在主 HTML 页面中，reCaptcha 对话框将显示，但如果在任何组件中（无论是主应用程序组件，子组件等），则不会显示。

这个 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 中时，它具有有效的尺寸 (654x78)

但在组件中渲染时，尺寸无效 (654x0)。

我有一个 Plunker 在这里显示问题 - https://plnkr.co/edoI5Hiydkfwiyggps3e

我尝试将我自己的 CSS 类添加到 div 中，增加高度但仍然没有显示。我还尝试了各种 CSS 样式来尝试转换 div，以及设置紧凑样式。

控制台中没有关于任何错误或正在修改的任何指示的输出。

任何想法 Angular 2 中的什么可能导致属性出错？

谢谢

【问题讨论】：

标签： javascript html css angular recaptcha

【解决方案1】：

如果您想使用 google-recaptcha，您必须使用名为 angular2-google-recaptcha 的指令。您可以找到它here，其中包含如何安装和实施它的详细说明。至于为什么在 index.html 中工作的代码在 Angular 2 组件中不起作用，那是因为 Angular 2 以完全不同的方式呈现其 HTML 模板。不只是你想的height的问题，看看这两者的区别：

【讨论】：

谢谢，链接的项目有点过时了，但是移植过来了，它工作正常。