javascript - 在 Angular 和 RxJS 6 中使用不同的页码参数调用相同的 HTTP 服务
问题描述
好的，这是上下文。
考虑一个将产品加载为Infinite Scroll的电子商务类别页面。
现在当用户向下滚动时，我们将查询参数更改为 page=2 并调用 http 服务来加载第 2 页的产品，然后对第 3 页进行类似的处理，依此类推。
现在假设用户在第 3 页，他点击了一个产品，这会将他带到产品详细信息组件。然后他点击浏览器的后退按钮。
所以现在他回到查询参数 page=3 的类别组件，该组件对第 3 页 onInit 进行 http 调用。
我想要做的是，在加载第 3 页的产品后，我想再次对 page=2 进行相同的调用，并在成功后对 page=1 进行第三次调用。
在每次通话中，我显然想将第 2 页和第 1 页的产品加载到第 3 页产品的顶部。
我的 HTTP 调用如下所示：
this._categoryService.get(
this.categoryId,
this.currentPage - 1,
this.pageSize,
sorting.sort,
sorting.order,
this._filterService.getFilter().getValue()
).subscribe(res => {
if(this.pagination.type === 'standard' || this.items.length === 0){
this.totalCount = res.total;
this.items = res.data;
this.filter = [...res.filter];
}else{
this.totalCount = res.total;
this.items.push(...res.data);
this.filter = [...res.filter];
}
});
所以我在成功回调中所做的是检查项目的列表是否为空，只需将响应数据分配给数组。
但如果它不为空，我会将这些值推送到已经存在的数组中。
我想知道，在 rxJS 6 中这样做的正确方法是什么。是否有一个明显的运算符可以用来调用第 3 页，然后是第 2 页，然后是第 1 页，随后在每个成功回调中调用？
另外，在 items 数组上预先添加（Append before/Unshift）产品的最佳方法是什么？
请注意，我还没有实现这个，因为我不想在订阅中链接 HTTP 调用，原因很明显。
非常感谢您提前提供的帮助。
根据评论进行编辑
仅当产品数量较少时才会应用无限滚动。例如，最多 10 页产品。
如果有更多，分类页面将有正常的分页。
我在这个项目中同时使用了 ngx-paginate 和 ngx-infinite-scroll。