AngularFire не запускает обнаружение изменений

Question

Я использую AngularFire и Angular 8 для создания приложения, но у меня глупая проблема (я считаю, что это на самом деле глупо).

Я создал простой сервис для переноса AngularFireAuth:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'firebase';
import { Subject } from 'rxjs';
import { MessageService } from 'primeng/api';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private user: Subject<User> = new Subject();
  private isLoggedIn: Subject<boolean> = new Subject();

  constructor(private afAuth: AngularFireAuth, private messageService: MessageService) {
    this.afAuth.auth.onAuthStateChanged(user => {
      this.user.next(user);
      this.isLoggedIn.next(user !== null);
    });
  }

  isAuthenticated() {
    return this.isLoggedIn.asObservable();
  }
}

Затем я ввел его в свой HomeComponent и подписался на Observable, возвращенный методом isAuthenticated :

import { Component, OnInit } from "@angular/core"
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-homepage',
  styleUrls: ['./homepage.component.scss'],
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
  isAuthenticated: boolean = false;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.isAuthenticated().subscribe((isAuth) => {
      this.isAuthenticated = isAuth;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    });
  }
}

Однако, когда вызывается функция стрелки, переданная методу subscribe, повторная визуализация не выполняется. Но console.log вызов показывает , что показывает "Пользователь аутентифицирован? True" на DevTools.

Некоторые другие тесты, которые я сделал: если я вызываю setTimeout изнутри стрелки функция передана на subscribe, результат тот же. Нет повторного рендеринга, и сообщение на DevTools говорит: «Пользователь аутентифицирован? True».

Но, если я вызову setTimeout (в этом тесте с задержкой 10 секунд) вне subscribe, компонент через 10 секунд перерисовывается:

import { Component, OnInit } from "@angular/core"
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-homepage',
  styleUrls: ['./homepage.component.scss'],
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
  isAuthenticated: boolean = false;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.isAuthenticated().subscribe((isAuth) => {
      this.isAuthenticated = isAuth;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    });

    setTimeout(() => {
      this.isAuthenticated = true;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    }, 10000)
  }
}

Что мне здесь не хватает? Что я неправильно понял?

Answer 1

потому что после компонента init вы вызываете вашу аутентификацию, вызывайте ее в конструкторе, она работает

import { Component, OnInit } from "@angular/core"
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-homepage',
  styleUrls: ['./homepage.component.scss'],
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
  isAuthenticated: boolean = false;

   constructor(private authService: AuthService) {
     this.authService.isAuthenticated().subscribe((isAuth) => {
      this.isAuthenticated = isAuth;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    });
    }

  ngOnInit(){}

}