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

切换地图