Угловые маршруты заставляют исчезать рекапчи - PullRequest
Новая
       7

Угловые маршруты заставляют исчезать рекапчи

0 голосов
/ 11 сентября 2018

У меня есть Recaptcha на компоненте, но если я использую маршрутизатор для перехода к компоненту с помощью recaptcha, каждый раз, когда я возвращаюсь к компоненту, recaptcha больше не существует.

В файле компонентов ts: 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

declare var grecaptcha: any;


@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {

  constructor(private _router: Router) { }

  @ViewChild('captcha') captcha:ElementRef;

  renderCaptcha(){
    grecaptcha.render(this.captcha.nativeElement, {
      callback: (e) => this.captchaCallback(e)
    });
  }

  captchaCallback(code:string){
    console.log('got result', code);
  }

  ngOnInit() {
    if('grecaptcha' in window){
      this.renderCaptcha();
    } else {
      window['loaded'] = () => {
        console.log('loaded');
        this.renderCaptcha();
      }
    };
  }


}

компонент html 

<div id="g-recaptcha" data-callback="resolve" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

скрипт тега 

<script src="https://www.google.com/recaptcha/api.js?onload=loaded&render=explicit" async defer></script>

Чего я пытаюсь достичь? Я хочу, чтобы капча перезагружалась при каждой загрузке компонента.

Пример проекта здесь: https://stackblitz.com/edit/angular-gitter-2jujzf

...