Используйте угловой асинхронный канал с BehaviourSubject / ReplaySubject и auditTime / debounceTime

Question

Я пытаюсь подписаться на BehaviourSubject / ReplaySubject с угловой асинхронной трубой.Также я должен использовать AuditTime или оператор debounceTime, чтобы выбросить некоторые значения.

Вот пример (я использовал Angular CLI версии 7.3.0 и изменил только app.component):

import {Component, OnInit} from '@angular/core';
import {Observable, ReplaySubject, Subject} from 'rxjs';
import {auditTime, tap} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `{{value$ | async}}`,
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {

  private readonly subjectWithState: Subject<number>;

  constructor() {
    this.subjectWithState = new ReplaySubject(1);
  }

  ngOnInit(): void {
    this.subjectWithState.next(42);
  }

  get value$(): Observable<number> {
    return this.subjectWithState.asObservable()
      .pipe(
        tap(value => console.log(value)),
        auditTime(1000),
      );
  }
}

Проблема в том, что субъект не прекращает испускать (одиночное) значение, и я не получаю никакого вывода (см. Журналы консоли).Все работает, как и ожидалось, с простым предметом или без auditTime (1000) .

Я не могу найти ничего, что могло бы объяснить это поведение.Как я могу использовать оператор audTime или debounceTime с асинхронным каналом и BehaviourSubject или ReplaySubject?

Answer 1

Каждый раз, когда представление обращается к значению $, создается новая наблюдаемая.Не используйте свойство getter и создайте свойство, чтобы получить доступ к одному и тому же экземпляру наблюдаемого.

  value$ = this.subjectWithState.asObservable()
    .pipe(
      tap(value => console.log(value)),
      auditTime(1000),
    );