Angular实现加载spinner：用providedIn: 'root'服务还是NGRX更好？

性能维度 #

• 现有Root服务方案性能更好：仅依赖RxJS Subject做事件分发，没有额外的框架开销，状态通知链路最短，内存和执行效率都更高，对于spinner这类高频轻量操作来说优势明显。
• NGRX方案有额外损耗：每次状态变更都要走Action分发、Reducer匹配、状态更新、Selector推送的完整流程，虽然单操作损耗在毫秒级，但属于不必要的额外开销。

最佳实践维度 #

优先选现有服务方案的场景 #

• 项目没有强制要求所有全局状态都存入NGRX
• spinner状态不需要和其他全局业务状态联动，也不需要做状态回溯、持久化等操作
• 没有复杂的多spinner聚合、优先级调度等需求，仅需要基础的启停功能
• 追求轻量化实现，不想写NGRX对应的Action、Reducer、Selector等模板代码

适合用NGRX方案的场景 #

• 项目已经全量接入NGRX，团队有统一的状态管理规范
• 需要配合NGRX Effect监听接口请求Action，自动实现spinner的启停，减少业务代码中的手动调用
• 需要聚合多个spinner状态派生全局加载状态，或者有加载状态历史排查、异常重试自动恢复等复杂需求

最终建议 #

你当前的实现已经是Angular生态下非常标准的轻量化全局服务实现，完全符合最佳实践，绝大多数场景下不需要为了用NGRX而做迁移。只有当你的加载状态管理复杂度明显提升，或者和其他NGRX管理的状态有强联动需求时，再考虑迁移即可。

你现有的实现代码参考：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

// root级注入的加载工具服务，全局可用
@Injectable({
  providedIn: 'root'
})
export class LoadingUtilsService {
  // 加载状态通知流
  $loading: Subject<SpinnerLoading> = new Subject<SpinnerLoading>();
  constructor() { }
  // 启动指定id的加载spinner
  startLoad(id) {
    this.$loading.next({ id: id, status: true });
  }
  // 停止指定id的加载spinner
  stopLoad(id) {
    this.$loading.next({ id: id, status: false });
  }
}

// spinner加载状态接口定义
export interface SpinnerLoading {
  id: string;
  status: boolean;
}

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