Angular - 避免 IntersectionObserver 的嵌套訂閱

Question

我目前正在研究一個無限滾動數據列表，其中每次主機元素可見時都會增量加載數據（每組數據末尾的不可見 div）。

但是，我在管理訂閱時遇到了麻煩。 我想在元素相交時發出請求並將更多數據推送到數組中。

我知道嵌套訂閱是一種反模式，那么我該如何解決呢？

這是模板和邏輯：

<tbody>
    <tr *ngFor='let movie of movieList; trackBy:trackByMovieId' (click)="selectMovie(movie.id)">
        ...
    </tr>
    <div *ngIf="!isOneFilterActive()" #sentinel>&nbsp;</div>
</tbody>

...
...
...

ngAfterViewInit(): void {
    this.intersectionObserver.createAndObserve(this.sentinel).pipe(
        filter((isVisible: boolean) => isVisible)).subscribe(() => { 

            // end of list detected: request more data
            this.apiManager.fetchMovies().subscribe(movieList => {
                if (movieList) {
                    this.movieList.push(...movieList.content);
                }
            });

        }
    );
}

Answer 1

您可以簡單地使用 pipe 運算符來簡化這樣的代碼

this.intersectionObserver.createAndObserve(this.sentinel)
        .pipe(
            filter((isVisible: boolean) => isVisible),
            debounce(1000),
            concatMap(x => this.apiManager.fetchMovies())
        ).subscribe(movieList => {
            if (movieList) {
                this.movieList.push(...movieList.content);
            }
        }
    );

流動：

1. 來自交叉點觀察者的值被觸發
2. 如果交叉點觀察器快速觸發它，則 Debounce 運算符將過濾該值（完全可選，如果它不適合您的用例，請刪除它）
3. Concatmap 運算符返回您現在可以訂閱的電影的新 observable

注意：還有 switchMap 和 mergeMap 您可以使用適合您的用例

參見： mergeMap

切換地圖