Google reCaptcha未在Angular 2應用中顯示應用

我正嘗試在Angular 2應用中使用Google reCaptcha。按照文檔中的描述進行設置，如果g-recaptcha標籤位於主HTML頁面中，將顯示reCaptcha對話框，但不會顯示是否在任何組件中（無論是主應用程序組件，子組件等）。Google reCaptcha未在Angular 2應用中顯示應用

此驗證碼工作正常

<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，它具有有效尺寸（654x78）

但是，當在組件中呈現尺寸無效（654x0）。

我有一個Plunker顯示這裏的問題 - https://plnkr.co/edoI5Hiydkfwiyggps3e

我曾嘗試加入我自己的CSS類股利，增加高度，但仍然沒有顯示。我也嘗試過各種CSS樣式來嘗試和轉換div，以及設置緊湊的樣式。

控制檯中沒有關於任何錯誤或任何正在修改的指示的輸出。

任何想法在Angular 2中可能會導致屬性出錯？

感謝

來源

2016-10-21 Lee Winder

如果你想使用谷歌，驗證碼，你必須使用一個名爲angular2-google-recaptcha指令。你可以找到它here詳細說明如何安裝和實施它。至於爲什麼在index.html中工作的代碼在Angular 2組件中不起作用，這是因爲Angular 2以完全不同的方式呈現其HTML模板。它不僅height問題，你有沒有想過，檢查這些兩者之間的區別：

來源

2016-10-21 21:38:44

感謝，鏈接項目是有點過時，但移植過來，它工作正常。 –

Google reCaptcha未在Angular 2應用中顯示應用

回答

相關問題