错误：验证码容器找不到或已经包含内部元素

我试图用Ionic2 /打字稿电话号码验证和初始化的ReCaptcha验证这样的：错误：验证码容器找不到或已经包含内部元素

的.ts文件

import firebase from 'firebase'; 

    @IonicPage() 
    @Component({ 
     selector: 'page-login', 
     templateUrl: 'login.html', 
    }) 

    export class LoginPage { 

    public recaptchaVerifier:firebase.auth.RecaptchaVerifier; 
      constructor(afAuth: AngularFireAuth, public authData: AuthProvider, public alertController: AlertController, formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams) { 
      this.loginForm = formBuilder.group({ 
       phone: ['', Validators.compose([Validators.required, 
       Validator.isValidPhone])] 
      }); 
      try { 
       this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); 
      }catch(e){ 
       console.log("There was a problem in initializing the recapctha verifier: " + e); 
      } 
      this.authData.recaptchaVerifier = this.recaptchaVerifier; 
      } 
}

的.html文件

<ion-content padding> 
    <div id="recaptcha-container"></div> 
    <form [formGroup]="loginForm" (submit)="loginUser()" novalidate> 

    <ion-item> 
     <ion-label stacked>Phone Number</ion-label> 
     <ion-input #phone formControlName="phone" type="phone" placeholder="10 digit mobile number" 
     [class.invalid]="!loginForm.controls.phone.valid && 
      loginForm.controls.phone.dirty"></ion-input> 
    </ion-item> 
    <ion-item class="error-message" *ngIf="!loginForm.controls.phone.valid && 
     loginForm.controls.phone.dirty"> 
     <p>Please enter a valid 10 digit mobile number.</p> 
    </ion-item> 

    <button ion-button block type="submit"> 
     Next 
    </button> 

    </form> 

</ion-content>

然而，当我运行代码我得到：

Error: reCAPTCHA container is either not found or already contains inner elements

探索的离子和火力的第一次世界，我觉得很难理解的问题。任何人遇到并解决过这个问题？任何见解都会有所帮助。

来源

2017-07-07 Madhup Singh Yadav

你找到它的任何解决方案？ –

我觉得现在的问题是，

<div id="recaptcha-container"></div>

还没有被添加到DOM，但（在类的构造函数）。你必须等待它来做到这一点。

有一件事是Angular 2希望你不要直接访问/操作DOM。您应该使用'Angular方式'，或者使用ElementRef（这里是an example，您必须等待ngAfterContentInit生命周期事件）或ViewChild。

来源

2017-07-07 12:10:46

你应该查看初始化“ionViewDidEnter”

this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

来源

2017-08-04 12:00:05 Jamshed

您还可以添加延迟加载验证码后调用它。它为我做了诡计。

JS：

var defaultApp = firebase.initializeApp(config); 
    setTimeout(function() { 
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', { 
     'size': 'normal', 
     'callback': function(response) { 
      console.log("success", response); 
     }, 
     'expired-callback': function() { 
      console.log("expired-callback"); 
     } 
    }); 

    recaptchaVerifier.render().then(function(widgetId) { 
     window.recaptchaWidgetId = widgetId; 
    }); 
    },2000);

HTML：

<div id="recaptcha-container"></div>

来源

2017-10-06 08:12:56

错误：验证码容器找不到或已经包含内部元素

回答

相关问题