Question

我正在尝试在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的开发者工具中看到，当HTML中存在reCaptcha时，它具有有效尺寸（654x78）

但是当在组件中渲染时，尺寸无效（654x0）。

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

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

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

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

由于

Answer 1

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

谷歌reCaptcha没有在Angular 2应用程序中显示

1 个答案: