Как получить уведомление об изменениях сервиса для компонента?

Question

Можно ли постоянно слушать все изменения в сервисе и передавать эту информацию компоненту?

Я знаю, что могу создать Observable в сервисе, как показано ниже:

@Injectable()
export class LoadingService {
    myBool$: Observable<boolean>;

    private boolSubject: BehaviorSubject<boolean>;

    constructor() {
        this.boolSubject = new BehaviorSubject(true);
        this.myBool$ = this.boolSubject.asObservable();
    }

    set myBool(newValue) {
        console.log("set",newValue)
        this.boolSubject.next(newValue);
    }
}

Я также знаю, что у меня может быть компонент или директива (как показано ниже), чтобы подписаться на наблюдаемое, чтобы получать уведомления об изменениях.

@Directive({
    selector: '[loading]'
})
export class LoadingDirective implements AfterViewInit {

    constructor(
    private element: ElementRef, 
    private renderer: Renderer2, 
    private loadingService: LoadingService
) {

    this.loadingService.myBool$.subscribe(response => {
        console.log("-----",response)               
    })
}

Но я получаю только первое изменение служебной переменнойв subscribe.Как я могу получить все будущие изменения (например, EventListener)?

Спасибо за вашу помощь!

Answer 1

Пара незначительных вещей происходит.Прежде всего, в вашем сервисе вы должны объявить наблюдаемую последовательность как функцию get, чтобы все новые запросы к ней возвращали новую наблюдаемую.То, как это написано, является неправильным использованием BehaviorSubject.

get myBool$: Observable<boolean> {
  return this.boolSubject.AsObservable();
}

Далее, вы действительно должны взглянуть на Async Pipe в шаблоне.Тодд Мотто написал довольно приличную статью об использовании наблюдаемых для подписки на изменение значений прямо из шаблона.

Это может выглядеть следующим образом (следует отметить, что обычный Subjectздесь было бы предпочтительнее, поскольку BehaviorSubject будет всегда возвращать значение сразу после подписки):

<div *ngIf="myBool$ | async as value; else loading">
  <!-- use the value here? -->
  <span> {{ value }} </span>
</div>
<div #loading>
  ... loading spinner here ...
</div>