Переменная шаблона не обновляется, когда служба выдает изменение (angular)

Question

У меня есть сервис:

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  signInChange: Subject<boolean> = new Subject<boolean>();
  isSignedIn: boolean;

  constructor() {
    this.isSignedIn = false;
  }

  signInChange: Subject<boolean> = new Subject<boolean>();
  isSignedIn: boolean;

  login() {
    this.auth2.signIn()
      .then(user => {
        this.isSignedIn = true;
        this.signInChange.next(this.isSignedIn)
      })
      .catch(error => {
        console.log("Error signing in")
      })
  }

  logout() {
    this.auth2.signOut()
      .then(user => {
        this.isSignedIn = false;
        this.signInChange.next(this.isSignedIn)
      })
      .catch(error => {
        console.log("Error signing out")
      })
  }

и компонент:

export class HomeComponent implements OnInit {
  signInSubscription: Subscription;
  isSignedIn: any;

  constructor(private authService: AuthenticationService) {
    this.isSignedIn = authService.isSignedIn;
    this.signInSubscription = authService.signInChange.subscribe(value => {
      console.log("status changed to: " + value)
      this.isSignedIn = value
    })
  }

  checkValues() {
    console.log("Component says: " + this.isSignedIn);
    console.log("Auth says: " + this.authService.isSignedIn)
  }

, а вот HTML:

<div id = "login-test">
  <div class="g-signin2"></div>
  <button (click)="signIn()">Sign in</button>
  <button (click)="signOut()">Sign out</button>
  <button (click)="checkValues()">Check values</button>
  <p>{{this.isSignedIn}}</p>
</div>

Итак, наблюдаемые работает, как и ожидалось (например, когда статус входа меняется, регистрируется правильный статус), НО на самом шаблоне переменная не обновляется, когда наблюдается изменение.

Вот что я не понимаю:

1. Когда я нажимаю кнопку «Проверить значения», вывод ВСЕГДА правильный. Свойство isSignedIn устанавливается правильно каждый раз, когда происходит обновление в службе. НО ШАБЛОН СЕБЯ НЕ ОБНОВЛЯЕТ.

2. Если я настрою кнопку только для переключения значения {{this.isSignedIn}}, шаблон обновляется в режиме реального времени. Почему он не будет обновляться в режиме реального времени, если изменение исходит от наблюдаемого?!?

Answer 1

Поскольку переменная isSignedIn в HomeComponent назначается один раз в конструкторе и никогда не назначается повторно. И вы на правильном пути, настраивая наблюдаемое в сервисе. Когда вам нужно актуальное значение в компоненте, используйте только наблюдаемое и не используйте логический флаг из службы напрямую.

Выполните следующие действия в компоненте. Переместите назначение внутри подписки и избегайте непосредственного использования логического флага из службы.

import { Component, ngOnInit, ChangeDetectorRef } from '@angular/core';

export class HomeComponent implements OnInit {
  signInSubscription: Subscription;
  isSignedIn: any;

  constructor(private authService: AuthenticationService, private changeDetectorRef: ChangeDetectorRef) {
    this.isSignedIn = authService.isSignedIn;
    this.signInSubscription = authService.signInChange.subscribe(value => {
      console.log("status changed to: " + value)
      this.isSignedIn = value;
      this.changeDetectorRef.detectChanges();
    })
  }

  checkValues() {
    console.log("Component says: " + this.isSignedIn);
    console.log("Auth says: " + this.authService.isSignedIn)
  }
}

Редактировать - включая ChangeDetectorRef