Angular 5不使用reCAPTCHA v2 +響應式表單進行路由

Question

當用戶填寫一個字段並點擊“提交”后，我將創建一個響應式表單，它將重定向到頁面。 現在，在那之后，我將觸發

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相應地正確設置了樣式類，但未呈現組件。

我已經將其縮小為：

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

我嘗試在這些功能中使用可觀察對象來調用這些功能之外的路由器，但仍然無法正常工作。 我錯過了什么嗎？ 請幫忙。 謝謝。

另外，我在同一組件的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']);
})