Поведение / последовательность построения сервисов Angular6 с Firebase

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 в мой app.module.ts в providers массиве.

Затем мой app.component.ts импортировал этот FirebaseService и использовал метод firestore:

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 выполняется до того, как мой signInAnonymously завершен из FirebaseService, но я не знаю, как его решить.

Я хотел бы сначала зарегистрировать пользователя, прежде чем он сможет использовать мои службы Firebase для получения данных из БД.

Насколько я понимаю, угловой service должен сначала полностью загрузиться, а затем идти только к коду компонента, особенно к коду в constructor.

Пожалуйста, сообщите.

Редактировать 1

Допустим, мой app.component.ts должен будет использовать uid из onAuthStateChanged, прежде чем извлекать данные из хранилища. Как сделать правильную последовательность угловых процессов?

Answer 1

Я нашел решение, которое реализует onAuthStateChanged на всех других services.ts или component.ts

Пример:

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.
      }
    })
  }

}

Answer 2

firebase - это имя, которое вы используете для ссылки на ваш FirebaseService, введенный как зависимость в ваш Компонент. В этом FirebaseService у вас есть свойство firebase, которое по сути является ссылкой на приложение Firebase.

Я думаю, это должно быть:

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

в вашем ngOnInit

Кстати, я не уверен, что ваше приложение Firebase будет инициализироваться синхронно. Поскольку вы используете Auth и Firestore от Firebase, вы должны рассмотреть возможность использования @angular/fire, который является официальным угловым модулем для Firebase для более чистой реализации.