Угловой 5 не маршрутизация с ReCAPTCHA v2 + Reactive Forms - PullRequest
Новая
       4

Угловой 5 не маршрутизация с ReCAPTCHA v2 + Reactive Forms

0 голосов
/ 27 мая 2018

Я создал реактивную форму, когда пользователь заполнил поле и нажал «Отправить», он будет перенаправлен на страницу.Теперь, после этого, я буду запускать 

this.router.navigate['somepage']

Все работает до Я реализовал reCAPTHCA v2 в своей реактивной форме.

Вот моя простая настройка реактивной формы:

<form [formGroup]="searchForm" (ngSubmit)="onSearchSubmit()">
  ....
  <div id="recaptcha" data-sitekey="xxx" class="g-recaptcha"></div>
  
  <button type="submit" [disabled]="flag">search</button>
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>

Опять же, все работает до этого момента, даже после вставки тега сценария, обратный вызов onloadCallback вызывается до проверки / подтверждения, еслипользователь - бот или нет.

Практически реактивная форма + reCAPTCHA работает, НО маршрутизатор, похоже, забит или заблокирован.

Работают ссылки на маршрутизатор, привязанные к якорям, routerLinkActive правильно устанавливает класс стиля соответственно, но компоненты не отображаются.

Я сократил его до этого:

Iне может использовать навигацию любого типа при использовании маршрутизатора, КОГДА маршрутизатор вызывается в scope функций инициализации и проверки reCAPTCHA, как показано ниже. 

declare var grecaptcha : any;

@Component({
...
})
export class TestComponent {
  //
  testSubObs: Subject < any > = new Subject();

  constructor(...) {}

  ngOnInit() {
    // ....
    this.testSubObs.subscribe(
      e => {
        //router still doesnt work here
        this.router.navigate(['/somepage']);
      });

    setTimeout(() => {
      this.router.navigate(['/somepage']); //works  
    }, 5000);
  }

  initCaptcha() {
    const verify = (response) => {
      // works
      console.log(response);
      // doesnt work
      this.router.navigate(['/stack']);

      this.testSubObs.next(response);
    }

    this.windowService.nativeWindow.onloadCallback = () => {
      // this works, properly renders the widgets 
      grecaptcha.render('recaptch', {
        'sitekey': xxxx,
        'callback': verify // tried verify.bind(this) still doesnt work. this is inside an arrow function. It doesnt matter in the first place.
      })

      // doesnt work
      this.router.navigate(['/stack']);
    }

    //this works
    this.router.navigate(['/stack']);
  }
}

Я пытался использовать наблюдаемые в этих функциях для вызова маршрутизатора вне этих функций, но он не работает.Я что-то пропустил?Пожалуйста помоги.Спасибо.

Кроме того, я поместил <a [routerLink]=".."> в шаблон HTML в том же компоненте, и маршрутизация работает правильно.Это меня сильно смущает, потому что ошибки не появляются, я даже пытался aot, но ошибок и предупреждений не появляется.

1 Ответ

0 голосов
/ 09 ноября 2018

Попробуйте запустить навигацию по маршруту внутри «NgZone»: 

import { component, NgZone } from '@Angular/core';
.....
custructor(private zone : NgZone, private router : Router) {}
.....
this.zone.run (() => {
   this.router.navigate(['/stack']);
})
...