Firebase的Angular6服務構建行為/順序問題

Question

我有一些構造序列問題，導致我的Firebase應用程序無法按預期工作。

我有一個FirebaseService來初始化firebase/app ：

import { Injectable } from '@angular/core';
import * as Firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {

  firebase:Firebase.app.App
  auth:Firebase.auth.Auth
  firestore:Firebase.firestore.Firestore


  constructor() {
    console.log("hello")
    this.firebase = Firebase.initializeApp(environment.firebase,"Angular app");
    console.log(this.firebase.name)//return Angular app
    this.auth = this.firebase.auth()

    this.auth.onAuthStateChanged(user=>{
      console.log(user)
      if(user){
        this.firestore = this.firebase.firestore()
        this.firestore.settings({timestampsInSnapshots: true})

      }
      else{
        this.auth.signInAnonymously().catch(error=>{
         console.log(error)
        })
      }
    })
   }
}

然后，我將FirebaseService導入到providers數組下的app.module.ts 。

然后，我的app.component.ts使用firestore方法導入了此FirebaseService ：

import { Component } from '@angular/core';
import { FirebaseService } from '../app/services/firebase.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private firebase:FirebaseService){
  }

  ngOnInit(){
    this.firebase.firestore.collection("sites").get().then(data=>{
      console.log(data)
    })//return error 
  }
}

Chrome控制台返回ERROR TypeError: Cannot read property 'collection' of undefined 。

我知道問題是AppComponent代碼在我從FirebaseService的signInAnonymously完成之前執行，但是我不知道如何解決它。

我想先登錄用戶，然后他們才能使用我的Firebase服務從數據庫獲取數據。

我的理解是，角度service應首先完全加載，然后才轉到組件的代碼，尤其是constructor的代碼。

請指教。

編輯1

可以說我的app.component.ts在從firestore檢索數據之前需要先從onAuthStateChanged中獲取uid，如何使角度處理順序正確？

Answer 1

firebase是用於引用作為組件中的依賴項注入的FirebaseService的名稱。 在此FirebaseService ，您具有firebase屬性，該屬性實質上是Firebase應用程序參考。

我認為應該是：

this.firebase.firebase.firestore.collection("sites").get()

在您的ngOnInit

順便說一句，我不確定您的Firebase應用程序是否將同步初始化。 由於您使用的是來自Firebase的Auth和Firestore，因此您應該考慮使用@angular/fire這是Firebase的官方Angular模塊），以實現更清潔的實施。

Answer 2

我找到了在所有其他services.ts或component.ts上實現onAuthStateChanged的解決方案

例：

import { Component } from '@angular/core';
import { FirebaseService } from '../app/services/firebase.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private firebase:FirebaseService){
    this.firebase.auth.onAuthStateChanged(user=>{
      if(user){
        this.firebase.firestore.collection("sites").get().then(data=>{
          data.forEach(ele=>{
            console.log(ele.data())
          })
        })
        //other code to be executed while constructing the page can put here.
      }
    })
  }

}