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

Question

我正在努力了解如何在Angular 10中使用Observables来加载指标，并在我拥有的一些graphql函数中更改数据。。我错过了我不理解的基本实现。

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

所以在我的组件类中，我有这样的：

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

这与可观察性无关，而是与Angular组件的生命周期有关。

在ngOnInit((函数中，我添加了this.loading.next(true(；但是html模板仍然打印出false。

这还为时过早-可观察到的发射一次，在模板渲染之前，有效地在任何人监听流之前。但是如果将相同的代码放在ngAfterViewInit而不是ngOnInit中，则可以工作。

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

Answer 2

好的，我不会使用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得到一个next为true，超时后得到一个next为false，只是为了展示流值的变化