Question

当用户填写字段并点击提交时，我会生成一个被动表单，它会重定向到一个页面。现在，在那之后，我将触发

this.router.navigate['somepage']

所有人的工作直到我已经以我的被动形式实施了reCAPTHCA v2。

这是我的简单反应式表单设置：

＆＃13;

<form [formGroup]="searchForm" (ngSubmit)="onSearchSubmit()">
  ....
  <div id="recaptcha" data-sitekey="xxx" class="g-recaptcha"></div>
  
  <button type="submit" [disabled]="flag">search</button>
</form>

＆＃13;

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

然后，即使插入脚本标记，所有人都在努力达到这一点，如果用户是机器人，则回调onloadCallback被调用到验证/验证。< / p>

几乎所有的反应形式+ reCAPTCHA都能正常工作但是路由器似乎被阻塞或阻塞了。

绑定到锚点的路由器链接工作，routerLinkActive相应地正确设置了样式类，但组件未呈现。

我已将其修剪至：

我无法使用任何类型的导航使用路由器在reCAPTCHA的初始化和验证功能的范围中调用路由器，如下所示。

＆＃13;

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']);
  }
}

＆＃13;

我尝试在这些函数中使用observable来调用那些函数之外的路由器，但它仍然无法正常工作。我错过了什么吗？请帮忙。感谢。

此外，我在同一组件的HTML模板中放置了<a [routerLink]="..">，并且路由正常工作。这让我很困惑，因为没有出现任何错误，我甚至尝试aot仍然没有错误甚至出现警告。

Answer 1

尝试在“ NgZone”内触发路线导航：

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

Angular 5不使用reCAPTCHA v2 + Reactive Forms进行路由

1 个答案: