如何在動態創建的組件上以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調用，我認為在所有方面都需要一個可以聽見的外部狀態，因為您將破壞每次創建組件的時間間隔。