Firebase: как асинхронно привязать пользователя из firebase.auth (). OnAuthStateChanged к угловому шаблону?

Question

Что я пробовал:

ngOnInit() {
    firebase.auth().onAuthStateChanged((user) => {
    console.log(user.uid); <-------------- Correctly showing in console
    this.uid = user.uid; <---------------- Not binding to html
    });
}

Если я задержу функцию на 5000 мс, она свяжется с шаблоном:

ngOnInit() {
  setTimeout(() => {
     this.getUid();
  }, 5000);
}

getUid(){
    firebase.auth().onAuthStateChanged((user) => {
    console.log(user.uid); <-------------- Correctly showing in console
    this.uid = user.uid; <---------------- Binding perfectly
    });
}

Как мне динамически определить, что onAuthStateChanged готов? Я не использую angularfire2/auth, и я хотел бы избежать этого и вместо этого использовать стандартный API-интерфейс Firebase JavaScript.

Answer 1

Вы можете создать свою собственную угловую службу Firebase и использовать наблюдаемые RXJS для обработки асинхронной инициализации.

firebase-auth.service.ts

import { Injectable, Optional } from '@angular/core'
import * as firebase from 'firebase/app'
import 'firebase/auth'

import { BehaviorSubject } from 'rxjs'


@Injectable({
  providedIn: 'root'
})
export class FirebaseAuthService {
  public app: firebase.app.App;
  public auth: firebase.auth.Auth;
  public user$: BehaviorSubject<firebase.User> = new BehaviorSubject(null);

  // Note: FirebaseConfig is a class to enable injecting the Firebase app 
  // initialization params when providing the service in app.module.ts.
  constructor(@Optional() fb_config: FirebaseConfig) {
    // https://firebase.google.com/docs/reference/js/firebase.app.App
    this.app = firebase.initializeApp(fb_config);
    this.auth = firebase.auth(this.app);

    this.auth.onAuthStateChanged(
      (user: firebase.User) => {
        if (user) {
          this.user$.next(user);
          console.log('User signed in');
        } else {
          this.user$.next(null);
          console.log('User signed out');
        }
      },
      (error: firebase.auth.Error) => {
        // handle error
      }
    )
  }
  // ...
}

Компонент

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html',
  styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
  constructor(private authService: FirebaseAuthService) {}
  // ...
}

Шаблон

<ng-container *ngIf="( authService.user$ | async ) as user">
  <div>Hello {{user.displayName}}</div>
</ng-container>