[英]Angular 5 not routing with reCAPTCHA v2 + Reactive Forms
I made a reactive form when a user filled a field and hit submit it will redirect to a page. 当用户填写一个字段并点击“提交”后,我将创建一个响应式表单,它将重定向到页面。 Now, after that, I will trigger
现在,在那之后,我将触发
this.router.navigate['somepage']
All's working until I've implemented reCAPTHCA v2 in my reactive form. 一切正常, 直到以我的反应形式实施reCAPTHCA v2。
Here's my simple reactive form setup: 这是我简单的反应式表单设置:
<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>
Then again, all's working up to this point even on the insertion of the script tag, the callback onloadCallback
is called up to the verification/validation if a user is a bot or not. 然后,即使插入了脚本标签,所有工作都进行到这一点,无论用户是否是机器人,都将调用
onloadCallback
回调进行验证/确认。
Pretty much the reactive form + reCAPTCHA works BUT the router seemed to be clogged or blocked. 响应式+ reCAPTCHA几乎可以正常工作,但是路由器似乎被阻塞或阻塞。
Router links binded to the anchors works, the routerLinkActive properly set the style class accordingly yet components are not rendered. 绑定到锚点的路由器链接有效,routerLinkActive相应地正确设置了样式类,但未呈现组件。
I've trimmed it down to this: 我已经将其缩小为:
I can't use any kind of navigation using router WHEN router is called in the scope of the reCAPTCHA's intialization and verification functions as shown below. 在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']); } }
I tried using observables in those functions to call the router outside those functions, still it doesn't work. 我尝试在这些功能中使用可观察对象来调用这些功能之外的路由器,但仍然无法正常工作。 Did I miss out anything?
我错过了什么吗? Please help.
请帮忙。 Thanks.
谢谢。
In addition, I placed a <a [routerLink]="..">
in the HTML template in the same component and the routing properly works. 另外,我在同一组件的HTML模板中放置了
<a [routerLink]="..">
,并且路由正常工作。 This confuses me a lot for there's no error appearing, I've even tried aot
still no errors or even warnings appear. 这让我很困惑,因为没有错误出现,我什至尝试
aot
仍然没有错误甚至警告出现。
Try to trigger your route's navigation inside "NgZone" : 尝试在“ NgZone”内触发路线导航:
import { component, NgZone } from '@Angular/core';
.....
custructor(private zone : NgZone, private router : Router) {}
.....
this.zone.run (() => {
this.router.navigate(['/stack']);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.