Angular RxJS：如何通过BehaviorSubject实现商品列表无限滚动分页

你遇到的核心问题很明确：每次请求新分页数据时直接覆盖了BehaviorSubject里的旧数据，导致没法把新数据和之前的商品列表合并起来。咱们一步步来调整代码解决这个问题：

1. 修改服务中的数据更新逻辑 #

当前的getProductsByCategory方法每次拿到新数据就直接next，完全替换了旧数据。要实现无限滚动，需要把新获取的分页数据追加到现有数据数组后面，而不是直接替换。

修改服务代码如下：

private productsSource = new BehaviorSubject<Product[]>([]); // 把初始值换成空数组，避免null判断的麻烦
public products$: Observable<Product[]> = this.productsSource.asObservable();

async getProductsByCategory(category: string, page: string = '1'): Promise<void> {
  const newProducts = await this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      per_page: '6',
      not_tags: 'component'
    }
  }).toPromise();

  // 获取当前BehaviorSubject里的已有数据，合并新数据后再发送
  const currentProducts = this.productsSource.value;
  this.productsSource.next([...currentProducts, ...newProducts]);
}

这里把初始值从null改成空数组[]，后续合并数据时不用额外处理null的情况。每次拿到新数据后，用扩展运算符把旧数组和新数组拼接，再发送给Subject，这样BehaviorSubject里就会保存完整的商品列表。

2. 实现loadData加载更多方法 #

在组件里需要维护当前的页码和选中的分类，每次触发加载更多时页码加1，再调用服务的方法：

private currentPage = 1;
private currentCategory: string; // 记录当前选中的分类，切换分类时要重置状态

// 初始化分类数据的方法（切换分类时调用）
async initCategoryProducts(category: string) {
  this.currentCategory = category;
  this.currentPage = 1;
  // 重置BehaviorSubject的数据，避免不同分类的商品混在一起
  this.productsService.productsSource.next([]);
  await this.productsService.getProductsByCategory(category, this.currentPage.toString());
}

async loadData(event) {
  this.currentPage++;
  try {
    await this.productsService.getProductsByCategory(this.currentCategory, this.currentPage.toString());
    // 加载完成后通知组件（比如Ionic的无限滚动组件）
    event.target.complete();

    // 判断是否还有更多数据：如果返回的新数据不足6条（per_page设置的是6），说明没有下一页了
    const totalProducts = this.productsService.productsSource.value.length;
    if (totalProducts % 6 !== 0) {
      event.target.disabled = true;
    }
  } catch (error) {
    console.error('加载更多失败:', error);
    event.target.complete();
  }
}

注意几个关键点：

• 切换分类时一定要重置页码并清空现有数据，不然不同分类的商品会混在一起
• 加载完成后必须调用event.target.complete()（如果用的是Ionic这类框架的无限滚动组件），不然组件会一直处于加载状态
• 通过返回数据的数量判断是否还有下一页，避免无效请求

额外优化建议 #

• 可以在服务里封装一个resetProducts方法，专门用来清空数据，不要直接在组件里操作productsSource，这样代码封装性更好
• 新增一个isLoading$的BehaviorSubject，用来在组件里显示加载动画，防止用户重复触发加载请求

内容的提问来源于stack exchange，提问作者hesham shawky