Javascript Google reCaptcha未在Angular 2应用程序中显示_Javascript_Html_Css_Angular_Recaptcha

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

javascript html css angular

Javascript Google reCaptcha未在Angular 2应用程序中显示,javascript,html,css,angular,recaptcha,Javascript,Html,Css,Angular,Recaptcha,我正在尝试在Angular 2应用程序中使用Google reCaptcha。按照文档中的说明进行设置，如果g-reCaptcha标记在主HTML页面中，则会显示reCaptcha对话框，但不会显示是否在任何组件中（无论是主应用程序组件还是子组件等）这辆车很好用 <body> <div class="g-recaptcha" data-sitekey="your_site_key"></div> </body> 但以下内容不会显示 @C

我正在尝试在Angular 2应用程序中使用Google 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>
  `,
})

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})

我可以在Chrome的开发者工具中看到，当reCaptcha出现在HTML中时，它具有有效的维度（654x78）

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

我这里有一个Plunker展示了这个问题-

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

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

知道Angular 2中的什么可能会导致属性出错吗

谢谢

如果你想使用google recaptcha，你必须使用一个名为

angular2 google recaptcha

的指令。您可以找到详细的说明如何安装和实施它。至于为什么在

index.html

中工作的代码在Angular 2组件中不工作，那是因为Angular 2以完全不同的方式呈现其html模板。这不仅仅是您所想的高度问题，还要检查这两者之间的差异：

谢谢，链接的项目有点过时了，但经过移植，效果很好。