Angular组件重构：如何自动在fooService.fooFunction执行前后调用toggleLoading？

你可以借助RxJS的操作符来封装加载状态的逻辑，彻底告别手动调用toggleLoading的重复代码。这里有两种实用的方案：

方案一：直接在服务调用的Observable链中添加操作符 #

利用tap在请求发起时开启加载，再用finalize（不管请求成功还是失败都会执行）来关闭加载。修改你的submitFooForm方法如下：

private submitFooForm() {
  this.fooService.fooFunction()
    .pipe(
      // 请求发起时开启加载
      tap(() => this.toggleLoading(true)),
      // 请求终止（成功/失败）时关闭加载
      finalize(() => this.toggleLoading(false))
    )
    .subscribe((response) => {
      // 处理成功逻辑，比如导航等
    }, () => {
      // 处理错误逻辑
    });
}

这样你就不需要在subscribe的回调里手动调用toggleLoading了，RxJS会自动帮你处理加载状态的切换。

方案二：封装通用的加载状态操作符（推荐复用场景） #

如果你的应用中有很多地方需要这种“请求前后切换加载状态”的逻辑，可以封装一个自定义操作符，让代码更简洁易维护：

// 先定义一个通用操作符
export function withLoading(loadingSubject: Subject<boolean>) {
  return function<T>(source: Observable<T>): Observable<T> {
    return source.pipe(
      tap(() => loadingSubject.next(true)),
      finalize(() => loadingSubject.next(false))
    );
  };
}

然后在组件中使用这个操作符：

private submitFooForm() {
  this.fooService.fooFunction()
    .pipe(
      withLoading(this.loading)
    )
    .subscribe((response) => {
      // 处理成功逻辑
    }, () => {
      // 处理错误逻辑
    });
}

这样不管你有多少个服务调用，都可以通过这个操作符快速添加加载状态管理，避免重复代码。

额外优化建议 #

• 把loading的Subject改成BehaviorSubject，这样组件初始化时可以设置一个初始值（比如false），避免模板中使用async管道时出现初始值缺失的问题：

  public loading = new BehaviorSubject<boolean>(false);
  

• 如果你的模板中需要绑定加载状态，直接用async管道即可，不用手动订阅：

  <div *ngIf="loading | async">加载中...</div>
  

内容的提问来源于stack exchange，提问作者Tjaart van der Walt