如何在动态创建的组件上以RxJS间隔使用异步管道？

Question

我想知道是否可以在本示例中的动态创建的组件上使用带有RxJS interval() async管道。 因为如果我在其中应用async管道，那么当组件更改时，间隔将被忽略。

假设我想每15分钟获取一次数据，但组件每15秒更改一次。

我发现的唯一方法是从一个Observable获取数据并将其保存到另一个Observable ，但是我认为这不是最佳实践。 还有其他方法可以实现此目标吗？

Observable看起来像这样：

interval(1000 * 60 * 15).pipe(startWith(0), switchMap(() => this.http.get('someUrl')));

我发现有效的解决方案：

interval(1000 * 60 * 15).pipe(startWith(0), switchMap(() => this.http.get('someUrl'))).subscribe((data) => {
  this.someUrlData = scheduled([data], asapScheduler);
});

Answer 1

您所拥有的解决方案似乎可以正常工作，并且是可以接受的解决方案。 但是，如果我是一位新开发人员来寻找它，我可能会对此感到困惑，并且可能会尝试进行不明智的重构（除非您对此发表过多评论）。

因此，我会尝试一种更具可读性的方法（如果我误解了您的用例，请原谅我）：

getData = new Subject<void>();

// UI Observable (referenced via the async pipe)
someData$ = this.getData.pipe(
    switchMap(() => this.http.get('someUrl')),
    shareReplay(1)
)

// Subscriptions (inside ngOnInit)
timer(0, 1000 * 60 * 15).subscribe(() => this.getData.next())

这样做的好处是您还可以控制何时获取数据。 您可以轻松地在屏幕上添加一个“刷新”按钮，并将其放在getData主题的下一个位置。

只要确保在计时器上清理您的订阅，否则它将永远存在。

---

更新：

要回答您的原始问题，从一个可观察值中获取一个值并将其保存到另一个值是100％的最佳实践。 但是，为了避开被破坏的组件，最佳实践是将其放入服务中，以使其保持完整。

Answer 2

我认为您找到的答案是达到您想要做的最好的方法。 您可以使用时间间隔创建一个共享状态，并在创建动态组件时检查时间间隔并基于它进行http调用，我认为在所有方面都需要一个可以听见的外部状态，因为您将破坏每次创建组件的时间间隔。