如何获得有关组件服务更改的通知？

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);
    }
}

我也知道我可以有一个组件或指令（如下所示）来订阅observable以获得有关更改的通知。

@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函数，以便所有新请求都返回一个新的observable。它的写作方式是滥用BehaviorSubject。

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

接下来，您应该真正了解模板中的Async Pipe。 Todd Motto写了一篇关于使用observable来直接从模板订阅值的pretty decent article。

这看起来可能如下（应该注意这里的常规Subject会更好，因为BehaviorSubject总是会在订阅时立即返回一个值）：

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