Question

我正在将一个具有Facebook功能的注册表实现到Angular 5应用程序中。我正在使用Facebook SDK for 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']);
        });
    }
   });

 }
}

它不会重定向到主页，但会发生奇怪的事情，两个组件都被加载，同一页面中的home和register组件以及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在修补区域中运行其代码，其中修补了异步API 在异步操作发生重新运行更改时通知Angular 检测。这使得变化检测非常有效。当代码是被称为以某种方式避开Angular的区域，变化检测不会如果一个方法（甚至一个来自Angular组件或类似的方法）从在Angular的区域外调用的代码调用，在此区域之外的所有内部区域都会运行完全处理。使用zone.run()，我们强制执行 Angular的区域

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

1 个答案: