在 Angular 10 中正确使用 Observable，值永远不会改变

Question

我正在尝试了解如何使用 Angular 10 中的 Observables 来加载指示器和更改我拥有的一些 graphql 函数中的数据......但我缺少我没有的基本实现明白了。

我们以加载指示器的布尔值为例。

所以在我的组件中 class 我有这个：

private readonly loading = new Subject<boolean>();
get loading$(): Observable<boolean> {
 return this.loading;
}

在模板 html 文件中我有这个：

{{(this.loading$ | async) ? 'true' : 'false'}}

问题是它总是打印 false

在 ngOnInit() 函数中我添加了 this.loading.next(true); 但 html 模板仍然打印 false.

我错过了什么？

谢谢

Answer 1

好的，我不会使用 setter。我会做类似的事情：

loading$ = new BehaviorSubject(false);

ngOnInit() {
   this.loading$.next(true)
   // setTimeout should be cleared but this is just to show toggling works
   setTimeout(() => {this.loading$.next(false)}, 2000)
}

解释：一个 behaviorSubject 有一个初始值 (false)。 behaviorSubject 是一个 Observable，因此您可以使用模板中的异步管道打印它。在 ngOnInit 中，behaviorSubject 获得下一个为真，超时后为下一个为假，只是为了展示流值变化

Answer 2

这与可观察对象无关，它与 Angular 组件生命周期有关。

in ngOnInit() function I added this.loading.next(true); but the html template still prints false.

太早了 - 可观察对象发出一次，在模板呈现之前，实际上是在任何人收听流之前。但是，如果将 ngAfterViewInit 而不是 ngOnInit.

放入，则相同的代码将起作用

https://stackblitz.com/edit/angular-xefd3z?file=src%2Fapp%2Fapp.component.ts

在 Angular 10 中正确使用 Observable，值永远不会改变

using Observable in Angular 10 properly, value never changes

angular

observable

angular2-observables