AngularFire2 Suscribeの戻り値は

Question

をFAIL私はget authenticatedを呼び出し、それがundefinedを返し、私のAuthServiceに

constructor(
    private afAuth: AngularFireAuth, 
    private db: AngularFireDatabase, 
    private router: Router 
) { 
    this.authState = afAuth.authState; 
    this.authState.subscribe((user: firebase.User) => { 
     this.authState = user; 
    }); 
    if (this.authenticated) { 
     // this.router.navigate([`/content`]); 
    } 
    } 

    // Returns true if user is logged in 
    get authenticated(): any { 
    return this.authState; 
    } 

をこのコードを持っています何か案が？

Answer 1

あなたの目的は何ですか？あなたは何を必要とし、なぜですか？

私はまだこのように必要な理由を知りません。しかし、私はそれがライフサイクルフック（you can find here the doc）の問題だと思う。

このように試してください。これはあなたのコンポーネント

export class *YOUR_COMPONENT* implements OnInit { 

    private authenticatedUser$: Subscription; <= import rxjs/Subscription 
    private authenticatedUser: User; <= import firebase/app 

    constructor(private auth: AuthService) { 
    this.authenticatedUser$ = this.auth.getAuthenticatedUser().subscribe((user: User) => { 
     // Here you're saving the firebase.user in your var authenticatedUser 
     this.authenticatedUser = user; 
    }); 

    ngOnInit() { 
     // Check if user is logged in.. 
     if(this.authenticatedUser) { 
     // When true, your code here.. 
     } 
    } 

    ....} 

とここにあなたのAuthServiceです：

export class authService { 

    constructor(private afAuth: AngularFireAuth) { <= import angularfire2/auth/auth 
     // constructor is empty 
    }); 

    getAuthenticatedUser() { 
     return this.auth.authState; 
    } 

    ....} 

これは動作するはずです。..

Answer 2

何が起こることは正常です。 console.logは同期呼び出しです。サブスクリプション内の内容は非同期です。したがって、console.logが.subcribeの後に書かれていても、実際にはより速く実行することができます。そのため、console.log(this.authState.uid);はundefinedを印刷します。

また、contructorにロジックを追加しないようにします。

サブスクリプションOnInit()があり、AfterViewInit()ライフサイクルのthis. authStateにアクセスしてください。

最後の注意、あなたも、あなたはOnInitと.unsubscribeOnDestroy :)

Answer 3

AngularFireAuth.authStateは非同期とObservableである必要がありますサブスクリプションを保存することができます。 You can read up on what an Observable is here on the ReativeX site。

ソートでは、authState observableは時間の経過とともにaysnc（解決に時間がかかります）、lazy（サブスクライブして値を取得する必要があるため、外部のconsole.logが機能しません。）

あなたは私がBehaviorSubject（again check out ReactiveX for more information on subjects）を使用することをお勧め購読ブロックの外側で、「現在の」値にアクセスする必要がある場合：

currentAuthState: BehaviorSubject<firebase.User|null|undefined>; 

constructor(afAuth: AngularFireAuth) { 
    this.currentAuthState = new BehaviorSubject(undefined); 
    afAuth.authState.subscribe(this.currentAuthState); 
} 

次に、あなたがアクセスすることができます。this.currentAuthState.getValue()を現在の値であるかを確認します; .subscribe変更を聞く。 do、swtichMapなどの他のRxJS演算子を使用します。そして、ユーザがログインしている場合はユーザーがログインしていない、とfirebase.Userされている場合それはundefinedロード、nullになりますあなたのビューで{{ (currentAuthState | async)?.email }}

を非同期パイプを使用。