Question

我在我的角度应用程序的登录组件中使用了Google身份验证。身份验证成功后，我将使用this.router.navigate(['home']);

路由到Home Component

我的浏览器中的URL从localhost:4200/login更改为localhost:4200/home，但是Home组件的HTML模板无法正确呈现，并且Home组件的ngOnInIt()也没有得到调用。 / p>

此应用程序显示为here。

有人可以帮助我调用ngOnInIt()并正确呈现home组件的HTML吗？

参考： Integrating Google Sign-In into your web app

Answer 1

为使代码简洁明了，已有一个针对Angular的Google登录集成库：ng-gapi。也许您可以看看，它可以为您提供帮助。

我不确定，但是您可能会遇到变更检测机制的问题，因为您正在调用外部js函数。您可以看看Understanding NgZone

例如，这是我使用ng-gapi和NgZone的代码的一部分：

googleAuth.getAuth().subscribe(auth => {

  auth.isSignedIn.listen((isSignedIn) => {
    this.ngZone.run(() => {
      this.isSignedInChanged(isSignedIn);
    });
  });
  auth.currentUser.listen((googleUser: GoogleUser) => {
    this.ngZone.run(() => {
      this.currentUserChanged(googleUser);
    });
  });

  this.ngZone.run(() => {
    if (auth.isSignedIn.get() && auth.currentUser.get()) {
      this.setUser(auth.currentUser.get());
      this._isSignedIn = true
      this._isUserLoggedChange.next(true);
      this.signedIn$.next(true);
    } else {
      this.signedIn$.next(false);
    }

    this._initialized = true;
    this.initialized.next(true);
  })
})

如您所见，我正在使用ngZone.run从Google登录的回调中调用Angular代码。

希望是你。

角路由中的Google身份验证无法正常工作

1 个答案: