如何使用RxJS监听类中isLoading变量及数据源加载状态？

好的，我来帮你解决用RxJS监听加载状态变化的问题，分两种场景详细说明：

普通的布尔变量无法直接被RxJS监听，我们需要用BehaviorSubject来封装这个状态——它不仅能保存当前值，还能把状态变化推送给订阅者，而且支持初始值（正好符合你默认false的需求）。

具体实现步骤：

import { BehaviorSubject, Observable, takeUntil } from 'rxjs';
import { Subject } from 'rxjs';

export class YourComponent implements OnDestroy {
  // 用BehaviorSubject维护内部加载状态，初始值为false
  private readonly _isLoadingSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的Observable，避免外部直接修改状态
  public readonly isLoading$: Observable<boolean> = this._isLoadingSubject.asObservable();
  
  // 用于组件销毁时取消订阅，防止内存泄漏
  private readonly _destroy$ = new Subject<void>();

  constructor(private yourHttpService: YourHttpService) {}

  // 发起HTTP请求的示例方法
  fetchData() {
    // 请求开始时，将状态设为true
    this._isLoadingSubject.next(true);
    
    this.yourHttpService.getData().pipe(
      // 组件销毁时自动取消订阅
      takeUntil(this._destroy$)
    ).subscribe({
      next: (data) => {
        // 处理返回的数据
        console.log('数据加载完成:', data);
      },
      complete: () => {
        // 请求完成（无论成功/失败），重置状态为false
        this._isLoadingSubject.next(false);
      },
      error: (err) => {
        console.error('请求出错:', err);
        // 错误时也要记得重置状态！
        this._isLoadingSubject.next(false);
      }
    });
  }

  ngOnDestroy() {
    // 组件销毁时通知所有订阅者取消订阅
    this._destroy$.next();
    this._destroy$.complete();
    this._isLoadingSubject.complete();
  }
}

你可以通过订阅isLoading$来监听状态变化，或者在模板中用async管道直接绑定（推荐，无需手动取消订阅）：

<!-- 模板中显示加载状态 -->
<div *ngIf="isLoading$ | async" class="loading-spinner">加载中...</div>

要监听HttpDataSource的状态，核心是让它内部的isLoading也通过可观察对象暴露出来——如果它现在只是普通布尔变量，你需要先改造它的实现：

第一步：改造HttpDataSource，用BehaviorSubject维护状态 #

export class HttpDataSource {
  private readonly _isLoadingSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的加载状态Observable
  public readonly isLoading$: Observable<boolean> = this._isLoadingSubject.asObservable();

  constructor(
    private service: YourService,
    private paginator: MatPaginator,
    private sort: MatSort,
    private columns: string[]
  ) {}

  // 假设这是数据源内部发起请求的方法
  loadData() {
    this._isLoadingSubject.next(true);
    
    this.service.getList({
      page: this.paginator.pageIndex,
      size: this.paginator.pageSize,
      sort: this.sort.active,
      direction: this.sort.direction
    }).subscribe({
      complete: () => {
        this._isLoadingSubject.next(false);
      },
      error: () => {
        this._isLoadingSubject.next(false);
      }
    });
  }
}

第二步：在组件中监听数据源的状态 #

现在你可以直接订阅_dataSource.isLoading$来获取动态变化的状态，甚至可以和组件自身的isLoading$合并（比如只要有一个加载中，就显示全局加载状态）：

import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

export class YourComponent implements OnInit, OnDestroy {
  private _dataSource!: HttpDataSource;
  private readonly _destroy$ = new Subject<void>();
  // 合并组件自身和数据源的加载状态
  public combinedLoading$!: Observable<boolean>;

  constructor(
    private service: YourService,
    @ViewChild(MatPaginator) private paginator: MatPaginator,
    @ViewChild(MatSort) private sort: MatSort
  ) {}

  ngOnInit() {
    const columns = ['id', 'name', 'age'];
    this._dataSource = new HttpDataSource(this.service, this.paginator, this.sort, columns);

    // 单独监听数据源的加载状态
    this._dataSource.isLoading$.pipe(takeUntil(this._destroy$)).subscribe(isLoading => {
      this.isListLoading = isLoading;
      // 这里可以做其他逻辑，比如禁用按钮、显示局部加载动画等
    });

    // 合并两个加载状态：只要有一个为true，就显示加载中
    this.combinedLoading$ = combineLatest([this.isLoading$, this._dataSource.isLoading$]).pipe(
      map(([selfLoading, dataSourceLoading]) => selfLoading || dataSourceLoading),
      takeUntil(this._destroy$)
    );
  }

  ngOnDestroy() {
    this._destroy$.next();
    this._destroy$.complete();
  }
}

关键注意点 #

• 永远记得在组件销毁时取消订阅，避免内存泄漏（用takeUntil或async管道）。
• 请求失败时也要重置加载状态，防止页面一直显示加载中。
• 对外暴露状态时要用asObservable()转成只读Observable，避免外部直接修改内部状态。

内容的提问来源于stack exchange，提问作者jtmg.io