时间戳

首页 > 解决方案 > 如何跟踪数据是否以完全反应的方式加载？

angular - 如何跟踪数据是否以完全反应的方式加载？

问题描述

考虑以下代码

 heroes: Obserable<Hero[]>;
 private _loadHeroes: EventEmitter<void> = new EventEmmiter;

 constructor(heroService: HeroService) {
    this.heroes = _loadHeroes.switchMap(() => heroService.fetchHeroes());
 }

有没有人知道如何不手动订阅以heroesLoaded: BehaviorSubject<boolean>适当的反应方式添加类似的东西？当然我可以做类似的事情

    this.heroes = _loadHeroes.switchMap(() => {
      this.heroesLoaded.next(false)
      heroService.fetchHeroes().finally(() => this.heroesLoaded.next(true)
    });

但我相信这不是最好的方法，我们的想法是将所有订阅留给异步管道，并且只在流中做所有事情。此外，我不想使用如上所述的不纯副作用来编写它。我尝试寻找 pulishBehavior 运算符，但我不知道如何使用它来对订阅时刻和价值释放/错误时刻做出反应。有可能吗？我对至少更好但不一定完美的任何可能的解决方案感兴趣。

标签： angularrxjs

解决方案

如果您只想跟踪它们是否已加载（例如显示加载指示器）：

heroes: Obserable<Hero[]>;
heroesLoaded: boolean = false;

constructor(heroService: HeroService) {
   this.heroesLoaded = false;
   this.heroes = of(null).pipe(
       tap(() => this.heroesLoaded = false),
       flatMap(() => heroService.fetchHeroes()),
       finalize(() => this.heroesLoaded = true)
   );
}

如果需要，您可以将 herosLoaded 设置为 BehaviorSubject 并将该行替换为this.heroesLoaded = false-this.heroesLoaded.next(false)我看不出会带来什么好处，但使用 tap 和 finalize 的原理是相同的。

推荐阅读