为何localStorage中存储的产品会覆盖服务内的选中产品？

问题现象 #

用户在ProductGallery页面选择产品后，导航到SelectedProduct页面，显示的却是localStorage中存储的旧产品，而非刚选中的新产品，不符合“仅在浏览器刷新时从localStorage读取数据”的设计逻辑。

核心原因 #

1. 服务作用域问题：如果SelectedProductService是在SelectedProductComponent的providers中声明（组件级别作用域），每次导航到该组件时都会创建新的服务实例。新实例初始化时，内部的appEffect会立即执行，读取AppService中appSignal的当前值（页面加载时从localStorage恢复的旧产品），覆盖自身的selectedProductSignal，导致刚选中的新产品被替换。
2. Effect无限制触发：当前SelectedProductService中的appEffect会响应appSignal的所有变化，即使是页面加载后的初始值，也会在服务实例化时触发，进而覆盖通过setSelectedProduct设置的新产品。

解决方案 #

方案一：将SelectedProductService设为根级别单例 #

确保整个应用只有一个SelectedProductService实例，避免每次组件导航时重新初始化，从根源上防止Effect重复执行覆盖新值。

修改SelectedProductService的装饰器：

@Injectable({
  providedIn: 'root' // 设为根级别单例
})
export class SelectedProductService {
  // 保留原有代码
}

方案二：添加标志位控制Effect触发时机 #

如果必须保留组件级别的服务，可以添加一个标志位，让Effect仅在应用初始化（页面刷新）时执行一次，后续不再响应appSignal的变化。

修改SelectedProductService：

export class SelectedProductService {
  private appService = inject(AppService);
  public selectedProductSignal = signal<ProductModel>(new ProductModel());
  public selectedProduct?: ProductModel;
  private isInitialRestoreCompleted = false; // 标记初始恢复是否完成

  private appEffect = effect(() => {
    if (!this.isInitialRestoreCompleted) {
      const selectedProduct = this.appService.appSignal().neiman.selectedProduct;
      
      untracked(() => {
        this.selectedProductSignal.set({ ...selectedProduct });
      });

      console.log('SelectedProductService: 从localStorage恢复产品', this.selectedProductSignal());
      this.isInitialRestoreCompleted = true; // 标记完成，后续不再触发
    }
  });

  // 保留原有setSelectedProduct方法
}

方案三：简化数据流（推荐） #

移除冗余的中间层，让SelectedProductService直接负责状态管理和localStorage读写，避免复杂的信号订阅和Subject传递。

1. 修改SelectedProductService：

@Injectable({ providedIn: 'root' })
export class SelectedProductService {
  public selectedProductSignal = signal<ProductModel>(new ProductModel());

  constructor() {
    // 初始化时仅执行一次localStorage恢复
    this.restoreFromLocalStorage();
  }

  private restoreFromLocalStorage() {
    const neimanData = JSON.parse(localStorage.getItem('neiman') as string);
    if (neimanData?.selectedProduct) {
      this.selectedProductSignal.set({ ...neimanData.selectedProduct });
    }
  }

  public setSelectedProduct = (product: ProductModel) => {
    this.selectedProductSignal.set({ ...product });
    saveStateToLocalStorage({ selectedProduct: this.selectedProductSignal() });
  };
}

2. 修改ProductGalleryComponent，直接调用SelectedProductService：

public setSelectedProduct = (product: ProductModel) => {
  this.selectedProductService.setSelectedProduct(product);
  this.router.navigateByUrl('/selected-product');
}

3. 移除ProductGalleryService中与selectedProductSubject相关的冗余代码，以及AppComponent中调用restoreStateFromLocalStorage的逻辑。

这种方式简化了数据流，确保只有页面刷新时才从localStorage读取数据，彻底解决覆盖问题。

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