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

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 中服务变量的第一次更改。我怎样才能获得所有未来的变化（如事件监听器）？

感谢您的帮助！

Answer 1

发生了一些小事。首先，在您的服务中，您应该将 observable 序列声明为 get 函数，这样所有对它的新请求都会返回一个新的 observable。它的写法是对BehaviorSubject的滥用。

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

接下来，你应该看看模板中的Async Pipe。 Todd Motto 写了一个 pretty decent article ，关于使用 observables 直接从模板订阅值的变化。

这可能如下所示（应注意，此处的常规 Subject 更可取，因为 BehaviorSubject 将总是在订阅后立即返回一个值）：

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