我在一個頁面上有許多組件，它們都使用 observables 來獲取 API 資料。我將這些 observables 傳遞給加載服務，我想從第一個 observable 傳遞到最后一個 observable 完成時顯示一個加載器。
加載服務：
private _loading = new BehaviorSubject<boolean>(false);
readonly loading$ = this._loading.asObservable();
showUntilLoadingComplete<T>(observable$: Observable<T>): Observable<T> {
return of(null).pipe(
tap(_ => this._loading.next(true)),
concatMap(_ => observable$),
finalize(() => this._loading.next(false))
);
}
然后我的組件像這樣呼叫加載服務：
this.loadingService.showUntilLoadingComplete(someObservable$)
.subscribe(data=> {
// do stuff
});
然而，由于第一次可觀察到的最終確定，行為主體被傳遞為假，這反過來又阻止了加載器的顯示。我已經考慮創建另一個行為主題來存盤活動的可觀察物件的陣列，并在完成后從這里洗掉它們，然后訂閱它并在陣列沒有長度時關閉加載器。但這似乎不是一個很好的解決方案，所以我正在尋找其他人的意見。
uj5u.com熱心網友回復：
由于您在單例服務中依賴同一個loading$Observable，因此您可以添加另一個屬性來反映active呼叫次數，然后loading僅在沒有其他活動呼叫時才關閉。
嘗試以下操作：
private _active: number = 0;
private _loading = new BehaviorSubject<boolean>(false);
readonly loading$ = this._loading.asObservable();
showUntilLoadingComplete<T>(observable$: Observable<T>): Observable<T> {
return of(null).pipe(
tap(() => {
this._loading.next(true);
this._active ;
}),
concatMap((_) => observable$),
finalize(() => {
this._active--;
if (!this._active) {
this._loading.next(false);
}
})
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/451897.html
標籤：javascript 有角度的 rxjs 可观察的
上一篇：如何將當前日期和時間作為常數？
下一篇：二維陣列中的空專案有問題