Google reCaptcha 未在 Angular 2 个应用中显示
Google reCaptcha not showing in Angular 2 app
我正在尝试在 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 class 添加到 div，增加高度但仍然没有任何显示。我也尝试了各种CSS样式来尝试转换div，以及设置紧凑的样式。
控制台中没有关于任何错误的输出或任何正在修改的指示。
知道 Angular 2 中的什么可能导致属性出错吗？
谢谢
如果你想使用 google-recaptcha，你必须使用一个名为 angular2-google-recaptcha 的指令。您可以找到 here 以及如何安装和实施它的详细说明。至于为什么在 index.html 中有效的代码在 Angular 2 组件中不起作用，那是因为 Angular 2 以完全不同的方式呈现其 HTML 模板。不只是你想的 height 问题，看看这两者的区别：
我正在尝试在 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 class 添加到 div，增加高度但仍然没有任何显示。我也尝试了各种CSS样式来尝试转换div，以及设置紧凑的样式。
控制台中没有关于任何错误的输出或任何正在修改的指示。
知道 Angular 2 中的什么可能导致属性出错吗？
谢谢
如果你想使用 google-recaptcha，你必须使用一个名为 angular2-google-recaptcha 的指令。您可以找到 here 以及如何安装和实施它的详细说明。至于为什么在 index.html 中有效的代码在 Angular 2 组件中不起作用，那是因为 Angular 2 以完全不同的方式呈现其 HTML 模板。不只是你想的 height 问题，看看这两者的区别：