AngularFire観測は/購読 - 同じスコープ内でクラス変数を設定しない

Question

私はFirebaseを使用してイオンアプリを構築し、そのためAngularFire2です。 Angularfire2では、認証が可能ですが、それは観測可能であり、ユーザオブジェクトを取得するために登録する必要があります。問題は、.subscribeが同じスコープにあるように見えないため、this.user = userを設定できないように見えることです。

ここでは、auth.tsとapp.component.tsがあります。

app.component.ts

export class MytApp { 

rootPage: any = TabsPage; 
signinPage = SigninPage; 
@ViewChild('nav') nav: NavController; 

userProfile: any = null; 

constructor(private platform: Platform, 
      private menuCtrl: MenuController, 
      private statusBar: StatusBar, 
      private splashScreen: SplashScreen, 
      private authService: AuthService) { 

    // this.authService.user.subscribe((user: firebase.User) => { 
     // var user = authService.user; 
     // if (user) { 
     // this.userProfile = user; 
     // this.onLoad(TabsPage); 
     // } else { 
     // this.userProfile = null; 
     // this.onLoad(SigninPage); 
     // } 
    // }); 

    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     statusBar.styleDefault(); 
     splashScreen.hide(); 

     var user = authService.user; /* HERE */ 
     console.log(user); 
     if (user) { 
      this.userProfile = user; 
      this.onLoad(TabsPage); 
     } else { 
      this.userProfile = null; 
      this.onLoad(SigninPage); 
     } 
    }); 
} 

} 

：私のサービスでは、私は、

auth.ts

export class AuthService { 

// user: Observable<firebase.User>; 
user: object = { 
    displayName: null, 
    email: null, 
    emailVerified: null, 
    photoUrl: null, 
    uid: null 
}; 

constructor(private facebook: Facebook, 
      private googlePlus: GooglePlus, 
      private platform: Platform, 
      private afAuth: AngularFireAuth) { 

    // this.user = afAuth.authState; 
    afAuth.authState.subscribe((user: firebase.User) => { 

     if (!user) { 
      this.user = null; 
      return; 
     } 
     this.user = { 
      displayName: user.displayName, 
      email: user.email, 
      emailVerified: user.emailVerified, 
      photoUrl: user.photoURL, 
      uid: user.uid 
     } 
    }); 

} 

と私のapp.component.tsでの認証しますご覧のとおり、var user = authService.user;の直後に私はconsole.log(user);を実行して、私が得るのは：

にconsole.log（ユーザ）。

displayName: null, 
    email: null, 
    emailVerified: null, 
    photoUrl: null, 
    uid: null 

私はFirebaseにユーザデータをターゲティングするためのユーザオブジェクトを使用するので、それは必要です。問題は、ユーザーオブジェクトが更新されていないことです。つまり、afAuth.authState.subscribe((user: firebase.User) => {}の「範囲」外です。

どのように私は購読できず、単にユーザーオブジェクトを取得するか、サブスクリプションからデータを抽出して、他のコンポーネントから（サービスであるため）簡単に取り出すことができますか？助けてください！

Answer 1

あなたはあなたのサービスでsubscribe()を行うことはできません。あなたが何をしたいのか、Observableを返し、コンポーネントは、それ自体ではなく、サービスでObservablesを処理させることです。この理由は、APIコールが非同期であり、コンポーネントがhttpコールの解決を待つことができないためです。あなたは何ができるか

はあなたAngularFireAuthあなたが望むオブジェクトにマッピングすることによって、観察可能を返すことができます。

export class AuthService { 
    public user: Observable<any>; //this can be any type you wish 
    constructor(private facebook: Facebook, 
       private googlePlus: GooglePlus, 
       private platform: Platform, 
       private afAuth: AngularFireAuth) { 

     this.user = 
      afAuth.authState.map((user: firebase.User) => { 
       if (!user) { 
        return null; 
       } 
       else return { 
        displayName: user.displayName, 
        email: user.email, 
        emailVerified: user.emailVerified, 
        photoUrl: user.photoURL, 
        uid: user.uid 
       } 
      }); 
    } 
} 

さて、あなたは他のコンポーネントであなたのAuthService.userを購読することができます：あなたの応答のための

export class MytApp { 

    rootPage: any = TabsPage; 
    signinPage = SigninPage; 
    @ViewChild('nav') nav: NavController; 

    userProfile: any = null; 

    constructor(private platform: Platform, 
       private menuCtrl: MenuController, 
       private statusBar: StatusBar, 
       private splashScreen: SplashScreen, 
       private authService: AuthService) { 


     platform.ready().then(() => { 
      // Okay, so the platform is ready and our plugins are available. 
      // Here you can do any higher level native things you might need. 
      statusBar.styleDefault(); 
      splashScreen.hide(); 
      //subscribe to AuthService 
      authService.subscribe(user => { 
       console.log(user); 
       if (user) { 
        this.userProfile = user; 
        this.onLoad(TabsPage); 
       } else { 
        this.userProfile = null; 
        this.onLoad(SigninPage); 
       } 
      }) 
     }); 
    } 
}