如何让Angular服务感知所有组件异步操作完成状态

我来给你梳理一个可行的方案，完美解决这个问题——核心思路是让服务能跟踪每个组件的异步任务状态，统一判断所有任务何时完成，进而控制过滤器的更新时机，防止用户在处理过程中重复操作。

第一步：改造你的Filter Service #

咱们需要给服务加几个关键部分，用来跟踪任务和暴露状态：

• 一个activeTasks集合，专门存当前所有组件正在执行的异步任务
• 一个isProcessing$ Observable，对外实时通知当前是否有组件在处理过滤逻辑
• 一个registerTask方法，让组件能把自己的异步任务注册到服务里

import { Injectable } from '@angular/core';
import { Observable, Observer, Subject, shareReplay, finalize } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FilterService {
  appliedFilter$: Observable<FormattedFilter[]>;
  private appliedFilter: Observer<FormattedFilter[]>;
  // 存所有活跃的异步任务
  private activeTasks = new Set<Observable<void>>();
  // 用来通知外部处理状态的Subject
  private isProcessingSubject = new Subject<boolean>();
  // 对外暴露的处理状态Observable
  isProcessing$ = this.isProcessingSubject.asObservable().pipe(shareReplay(1));

  constructor() {
    this.appliedFilter$ = new Observable<FormattedFilter[]>(o => {
      this.appliedFilter = o;
    }).pipe(shareReplay(1));
  }

  onFiltersApplied(filters: Filter[]): void {
    // 如果当前有组件在处理，直接拦截新的请求
    if (this.activeTasks.size > 0) {
      console.warn('当前正在处理过滤请求，请稍候');
      return;
    }
    const formattedFilters = this.formatFilters(filters);
    this.appliedFilter.next(formattedFilters);
  }

  // 组件调用这个方法注册自己的异步任务
  registerTask(task$: Observable<void>): Observable<void> {
    this.activeTasks.add(task$);
    this.updateProcessingStatus();
    // 任务完成时自动从集合中移除
    return task$.pipe(
      finalize(() => {
        this.activeTasks.delete(task$);
        this.updateProcessingStatus();
      })
    );
  }

  // 更新处理状态并通知外部
  private updateProcessingStatus() {
    this.isProcessingSubject.next(this.activeTasks.size > 0);
  }

  private formatFilters(filters: Filter[]): FormattedFilter[] {
    // 这里是你的过滤器格式化逻辑
    return [];
  }
}

第二步：改造每个Filtrable组件 #

每个组件在处理异步过滤逻辑时，需要把自己的异步任务包装成Observable，然后注册到服务里。这样服务就能自动跟踪这个任务的开始和结束：

import { Component, OnInit } from '@angular/core';
import { FilterService } from './filter.service';
import { switchMap, map } from 'rxjs';

@Component({
  selector: 'app-filtrable-component',
  template: '<div>过滤组件内容</div>'
})
export class FiltrableComponent implements OnInit {
  constructor(private filterService: FilterService) {}

  ngOnInit() {
    this.filterService.appliedFilter$.subscribe(filters => {
      // 把你的多步骤异步操作包装成一个Observable
      const filterTask$ = this.handleFiltering(filters);
      // 注册到服务，然后订阅任务完成事件
      this.filterService.registerTask(filterTask$).subscribe(() => {
        console.log('当前组件的过滤流程完成啦');
      });
    });
  }

  // 模拟你的多流水线异步操作
  private handleFiltering(filters: FormattedFilter[]): Observable<void> {
    // 这里替换成你实际的异步逻辑：比如调接口、处理数据等
    return this.dataService.fetchRawData().pipe(
      switchMap(rawData => this.processRawData(rawData, filters)),
      switchMap(processedData => this.saveProcessedData(processedData)),
      map(() => void 0) // 统一转换成void类型的Observable，方便服务跟踪
    );
  }
}

第三步：在UI层控制用户操作（可选） #

你可以利用服务暴露的isProcessing$来禁用过滤器的应用按钮，让用户直观看到当前正在处理，避免重复点击：

<!-- 过滤器控制组件的模板 -->
<button 
  (click)="onApplyFilters()"
  [disabled]="(filterService.isProcessing$ | async)"
>
  {{ (filterService.isProcessing$ | async) ? '处理中...' : '应用过滤器' }}
</button>

为啥这个方案可行？ #

• 动态任务跟踪：不管有多少个组件，只要它们注册了自己的异步任务，服务就能实时跟踪任务数量，任务完成时自动移除。
• 状态实时通知：isProcessing$会实时告诉外部当前是否在处理中，不管是服务内部判断还是UI层禁用按钮都能用。
• 自动拦截重复操作：在onFiltersApplied里判断活跃任务数量，直接拦截新的请求，从根源上防止用户在处理中重复更新过滤器。

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