如何用Services和BehaviorSubject管理Angular状态？无需NgRx的简易方案

这是无需NgRx的最简轻量状态管理方案，核心是利用Angular Service的单例特性缓存数据，避免页面切换时重复请求。

最简实现步骤 #

1. 创建商品数据服务（单例） #

通过BehaviorSubject存储商品列表状态，实现"先读缓存、无缓存再请求"的逻辑：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

// 定义商品类型
interface Product {
  id: number;
  name: string;
  price: number;
}

@Injectable({
  providedIn: 'root' // 根注入确保服务是单例
})
export class ProductService {
  // 用BehaviorSubject存储状态，初始值为空数组
  private productsSubject = new BehaviorSubject<Product[]>([]);
  // 对外暴露只读Observable，防止外部直接修改状态
  public products$ = this.productsSubject.asObservable();
  // 标记数据是否已加载，避免重复请求
  private isLoaded = false;

  constructor() { }

  getProducts(): Observable<Product[]> {
    // 已加载过数据，直接返回缓存的数据流
    if (this.isLoaded) {
      return this.products$;
    }

    // 模拟API请求（实际项目替换为HttpClient.get）
    const mockApiRequest = new Observable<Product[]>(observer => {
      setTimeout(() => {
        observer.next([
          { id: 1, name: '商品A', price: 99 },
          { id: 2, name: '商品B', price: 199 }
        ]);
        observer.complete();
      }, 1000);
    });

    // 请求成功后更新缓存，标记为已加载
    return mockApiRequest.pipe(
      tap(products => {
        this.productsSubject.next(products);
        this.isLoaded = true;
      })
    );
  }
}

2. 商品列表组件订阅数据 #

利用async pipe自动处理订阅和取消订阅，避免内存泄漏：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ProductService, Product } from './product.service';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>商品列表</h2>
    <div *ngFor="let product of products$ | async">
      <p>{{product.name}} - ￥{{product.price}}</p>
    </div>
  `
})
export class ProductListComponent implements OnInit {
  products$: Observable<Product[]>;

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    // 组件初始化时获取数据（首次请求，后续直接读缓存）
    this.products$ = this.productService.getProducts();
  }
}

核心逻辑说明 #

• 由于Service是根注入的单例，整个应用生命周期内只会存在一个实例，数据会一直保存在BehaviorSubject中（除非页面刷新）
• 第一次进入列表页时，isLoaded为false，会发起请求并缓存数据；切换到管理页再返回时，isLoaded已为true，直接返回缓存数据流，不会重复请求
• 对外暴露只读的products$，确保状态只能通过Service的方法修改，符合封装原则

内容的提问来源于stack exchange，提问作者Sakén