Angular 2 向组件发送回调服务

Question

大家好我已经搜索了几个小时并尝试了所有方法，例如 or with Events 但没有成功..

问题

我有一个个人资料页面，其中有一个按钮 loginFb()，它调用我的 users.services。该服务使用 FacebookAPI 调用数据并将它们发送到数据库。现在用 user 对象将 "callback" 发回我的组件会很酷 :)

因为当我（单击）登录时，我在 Firebase 中看到了新用户，但我的页面不是 "refreshed"，我认为这是因为我的异步为时已晚..？

这是我的profile.ts（个人资料页面）

import { Users } from '../../services/users.service';

export class ProfilePage {
    user :any;
    isConnected :boolean = false;

  constructor(public navCtrl: NavController, 
              public usersService: Users, 
              public modalCtrl: ModalController) { }

  loginFB(){
    this.usersService.registerUserFb();
    this.usersService.getUserFacebook().subscribe((userObject) => {
       this.user = userObject;
      })
    }
}

这是我的 users.services.ts

  getUserFacebookId(){
   Facebook.getLoginStatus().then((response) => {
     alert("id in getUSERFACEBOOKID = " + JSON.stringify(response.authResponse.userID));
      return response.authResponse.userID;
    });
  }

  getUserFacebook(){
    return this.af.database.object('users/' + this.getUserFacebookId());
  }

registerUserFb(){
    Facebook.login(['email']).then((response) => {
      Facebook.getLoginStatus().then((response) => {
        if(response.status == 'connected'){
          this.checkIfUserExists(response.authResponse.userID);
         }

        });
      });
  }

checkIfUserExists(uid) {
    let user = this.af.database.object('users/' + uid, { preserveSnapshot: true });
    user.subscribe(snapshot => {
    if(!snapshot.exists()) {
      this.saveInDatabase(uid);
    }
    });
}

saveInDatabase(uid){
      Facebook.api('/' + uid + 
              '?fields=id, name, ...])
            .then((data) => {
                var newUser = {
                  //data saving
                };
                this.af.database.object('users/' + uid).set(newUser);
                this.showToast("User successfully registered");
    });
  }

Answer 1

您正在发送多个异步请求，您必须等到 registerUserFb 解决后再调用 getUserFacebook :

 //ProfilePage     
 loginFB(){
    this.usersService
        .registerUserFb()
        .then(()=>{
             this.usersService.getUserFacebook().subscribe((userObject) => {
                this.user = userObject;
             });
        });
 }


//users.services.ts
registerUserFb(){
    return new Promise(resolve => {
      Facebook.login(['email']).then((response) => {
         Facebook.getLoginStatus().then((response) => {

            if(response.status == 'connected'){
               this.checkIfUserExists(response.authResponse.userID);
               resolve();
            }

         });
      });
    });
}

Answer 2

下面是一些使用 RxJs 的伪代码：

registerUserFb():Observable<any>{
    return Facebook.login(['email']).flatMap(() => this.getLoginStatus());
}

getLoginStatus():Observable<any>{
    return Facebook.getLoginStatus();
}

loginFb(){
    this.registerUserFb().flatMap(()=>this.usersService.getUserFacebook()).subscribe((userObject=>{

    }))
}

正如@ssougnez 所指出的，两个异步调用之间存在竞争。

Angular 2 向组件发送回调服务

Angular 2 Send callback service to component

service

facebook-graph-api

firebase

angularfire2

angular

问题