ПоведениеSubject не испускает значения

Question

В моем приложении Angular 7 у меня есть служба входа в систему, которая отслеживает, вошел ли человек в систему, и администратор. По какой-то причине видно только начальное значение true из метода login. В сервисе у меня так:

private admin = new BehaviorSubject(false);
admin$ = this.admin.asObservable();

login(user: string, pwd: string): Observable<ILoginData> {
    sessionStorage.removeItem('admin');

    const coded = btoa(`${user}:${pwd}`);
    const headers = new HttpHeaders({
        'Authorization': `Basic ${coded}`,
    });

    return this.http
        .post<ILoginData>(`${this.baseUrl}/login`, null, {headers: headers})
        .pipe(
            tap(x => {
                sessionStorage.setItem('admin', JSON.stringify(x.admin));

                this.admin.next(x.admin);
            })
        )
}

logout(): void {
    sessionStorage.removeItem('admin');
    this.admin.next(false);
}

А потом app.component.ts подписывается на это:

private subscription: Subscription;

ngOnInit(): void {
    this.subscription = this.producerService.admin$.subscribe(x => {
        console.info(`Admin being set to ${x}`);
        this.showAdminSection = x;
    });
}

ngOnDestroy(): void {
    if (this.subscription) {
        this.subscription.unsubscribe();
    }
}

Я вижу, что при входе в систему подписка вызывается со значением, но когда я вызываю метод logout(), даже если я отправляю обновление false, сообщение никогда не печатается на консоль говорит, что она установлена ​​на false. Как будто выдается только первое значение, а затем подписка по какой-то причине отключается.

Я не уверен, почему false не отправляется / не получается.

Answer 1

Не обязательно, что ngOnDestroy вызывается до получения последнего значения из наблюдаемого.

Это зависит от логики или времени, необходимого для выполнения операции.В вашем случае logout требуется еще некоторое время, и, прежде чем он будет завершен, вызывается ngOnDestroy и ваша подписка уничтожается.

Например, рассмотрим код здесь stackblitz ,Если вы видите в файле test.service.ts , я создал 2 функции, как показано ниже:

...
  nextValueDelayed(value: boolean) {
    setTimeout(() => {
      this._test.next(value);
    });
  }

  nextValue(value: boolean) {
    this._test.next(value);
  }
...

Теперь из app.component.ts , яя звоню так же, как показано ниже:

...
  reverse() {
    this.visible = !this.visible;
    this._testService.nextValue(this.visible);
  }

  reverseDelayed() {
    this.visible = !this.visible;
    this._testService.nextValueDelayed(this.visible);
  }
...

Обе функции вызываются с кнопок, а visible отвечает за создание и уничтожение HelloComponent. app.component.html

<hello name="{{ name }}" *ngIf="visible"></hello>
<button (click)="reverse()">Reverse</button>
<button (click)="reverseDelayed()">Reverse Delayed</button>

Теперь HelloComponent подписывается и утешает значение, а также отписывается при уничтожении, как показано ниже: hello.component.ts

...
ngOnInit(){
    this.sub = this._testService.test$.subscribe(value=>{
      console.log(value);
    })
  }

  ngOnDestroy(){
    this.sub.unsubscribe();
  }
...

Теперь попробуйте нажать кнопки Reverse и Reverse Delayed, и вы увидите, что при нажатии на Reverse будут напечатаны все значения.Но когда вы нажимаете Reverse Delayed, компонент будет уничтожен до получения последнего значения, потому что мы использовали setTimeout для добавления некоторой задержки.