Angular 5 Facebook 身份验证。试图重定向到主页

Question

我正在 Angular 5 应用程序中实现使用 Facebook 注册功能。我正在为 JavaScript 使用 Facebook SDK，但由于所有允许 Facebook 身份验证的方法都是异步的，我无法重定向到它们内部的主路由 URL。

如有任何帮助，我将不胜感激：

这是我的代码：

我有一个像这样嵌入 Facebook 组件的注册组件：

register.component.html:

<facebook (successfulFacebookLogin)="onsuccessfulFacebookLogin($event)"></facebook>

我的 Facebook 组件如下所示：

declare var window: any;
declare var FB: any;
....
export class FacebookComponent implements OnInit {

@Output() successfulFacebookLogin: EventEmitter<boolean> = new 
EventEmitter<boolean>(); //event to pass data to the paretn container

constructor(private _router: Router, private _loginService: LoginService) {

// This function initializes the FB variable 
(function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) { return; }
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/en_US/sdk.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

let thiss=this;
window.fbAsyncInit = () => {
  FB.init({
    appId: 'xxxxxxxxxxx',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.10'
  });
  FB.AppEvents.logPageView();
  };    
}
//Method called when clicking on button Register with Facebook
loginWithFacebook()
{
  //If I enable this line it successfuly redirect to home page  but the 
  //facebook login hasn't happened yet
  //this._router.navigate(['./home']);
  let globalThis = this;
  FB.getLoginStatus((response) => {
    if (response.status === 'connected') {

     FB.api('/me?fields=id, name, first_name,last_name, picture', function (response) {
       console.log(response);
       globalThis._loginService.setFacebookUser(response.first_name, response.last_name, response.id, '', '', response.picture.data.url);
     });
      //this.successfulFacebookLogin.emit(false);
      this._router.navigate(['./home']);
    }
    else {
        FB.login((loginResponse)=>{
          //this.successfulFacebookLogin.emit(false)
          this._router.navigate(['./home']);
        });
    }
   });

 }
}

它没有重定向到主页，但是发生了一些奇怪的事情，两个组件都被加载了，主页和注册组件在同一个页面并且 URL 更改为 /home。主页组件未初始化。如果我在调用 FB.getLoginStatus 方法之前重定向，它会正确初始化，如代码注释所示。

Answer 1

我觉得这是一个 zone 问题

试试这个

import { Component, NgZone } from '@angular/core';

constructor(public _router: Router, public _zone: NgZone) {}

this._zone.run(()=>{
   this._router.navigate(['./home']);
});

按枪更新

Angular runs its code in a patched zone where async APIs are patched to notify Angular when async action has happened to rerun change detection. This makes change detection quite efficient. When code is called that somehow avoids Angular's zone, change detection doesn't kick in. If a method (even one from an Angular component or similar) is called from code that was invoked outside Angular's zone, everything inside that runs outside the zone until this event is fully processed. With zone.run() we force execution back into Angular's zone

Angular 5 Facebook 身份验证。试图重定向到主页

Angular 5 Facebook authentication. Trying to redirect to home page

facebook-javascript-sdk

typescript

angular