Angular Facebook5身份验证。正在尝试重定向到主页

我正在一个Angular 5应用程序中实现注册Facebook功能。我正在使用FacebookSDK进行JavaScript，但由于所有允许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']);
        });
    }
   });

 }
}

声明变量窗口：任意；
声明var FB：任何；
....
导出类FacebookComponent实现OnInit{
@Output（）成功FaceBookLogin:EventEmitter=new
EventEmitter（）；//将数据传递到paretn容器的事件
构造函数（专用路由器：路由器，专用登录服务：登录服务）{
//此函数用于初始化FB变量
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src='//connect.facebook.net/en_US/sdk.js'；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
让this=this；
window.fbAsyninit=（）=>{
FB.init({
appId:'xxxxxxxxxx'，
自动假肢：对，
xfbml：是的，
版本：“v2.10”
});
FB.AppEvents.logPageView（）；
};    
}
//单击按钮注册Facebook时调用的方法
登录Facebook（）
{
//如果我启用此行，它将成功重定向到主页，但
//facebook登录还没有发生
//这是路由器导航（['./主页]）；
让globalThis=这个；
FB.getLoginStatus（（响应）=>{
如果（response.status===“已连接”）{
api（'/me？fields=id、name、first\u name、last\u name、picture'，函数（响应）{
控制台日志（响应）；
globalThis.\u loginService.setFacebookUser（response.first\u name、response.last\u name、response.id、“”、response.picture.data.url）；
});
//this.successfulFacebookLogin.emit（false）；
这是路由器导航（['./主页]）；
}
否则{
FB.login（（loginResponse）=>{
//this.successfulFacebookLogin.emit（false）
这是路由器导航（['./主页]）；
});
}
});
}
}

---

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

我觉得这是一个

区域

问题

试试这个

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

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

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

按枪更新

Angular在修补了异步API的修补区域中运行其代码 当发生异步操作以重新运行更改时通知Angular 侦查这使得变更检测非常有效。当代码是 称之为某种程度上避免了Angular的区域，而变化检测则没有 踢进来。如果是一种方法（即使是来自角度组件或类似组件的方法） 从Angular区域外调用的代码调用， 在该事件结束之前，在区域外运行的所有内容 完全处理。使用

zone.run（）

我们将强制执行返回到 角区

---

你把路由器放在哪里？在同一个页面中出现的两个组件都与OutletHoo man的一些问题相对应。你是对的。它成功了，你能给我更多的细节吗？这是关于什么问题的？非常感谢。这真的节省了我的时间。