如何在Angular中通过后端请求无刷新更新收藏状态组件？

我想实现商品心形收藏图标的无刷新切换：未收藏时显示<i class="fa-regular fa-heart" *ngIf="!isFavourite"></i>，收藏后显示<i class="fa-solid fa-heart" *ngIf="isFavourite"></i>。目前后端通过FavouriteService实现了数据获取和收藏切换逻辑，功能正常，但每次操作后必须刷新页面才能看到图标状态变化。我尝试用BehaviorSubject维护收藏列表状态，相关组件订阅后仍未解决问题，是否需要借助localStorage这类方案？

相关代码实现 #

FavouriteService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable, BehaviorSubject } from 'rxjs';
import { PrimitiveProduct } from '../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class FavouriteService {
  apiUrl = `${environment.apiUrl}/user/favourites`;

  private favouritesSubject = new BehaviorSubject<PrimitiveProduct[]>([]);
  favourites$ = this.favouritesSubject.asObservable();

  constructor(private http: HttpClient) {}

  fetchFavourites(): void {
    this.http
      .get<PrimitiveProduct[]>(this.apiUrl, { withCredentials: true })
      .subscribe({
        next: (favourites) => {
          this.favouritesSubject.next(favourites);
        },
        error: (err) => console.error('Error fetching favourites:', err)
      });
  }

  toggleFavourite(productUid: string): Observable<string> {
    return this.http.post<string>(
      `${this.apiUrl}?productUid=${productUid}`,
      null,
      { withCredentials: true }
    );
  }

  // edited
  updateFavouritesLocally(productUid: string) {
    const favourites = this.favouritesSubject.getValue();
    const isAlreadyFavorite = favourites.some((fav) => fav.uid === productUid);

    if (isAlreadyFavorite) {
      this.favouritesSubject.next(
        favourites.filter((fav) => fav.uid !== productUid)
      );
    } else {
      this.productService.getProductByUid(productUid).subscribe({
        next: (fullProduct) => {
          if (fullProduct) {
            this.favouritesSubject.next([...favourites, fullProduct]);
          } else {
            console.error(`Product with uid ${productUid} not found`);
          }
        },
        error: (err) => {
          console.error(`Error fetching product with uid ${productUid}:`, err);
        }
      });
    }
  }
}

商品组件调用逻辑

ngOnInit() {
    this.favouriteService.favourites$.subscribe((favourites) => {
      this.isFavourite = favourites.some((fav) => fav.uid === this.product.uid);
    });
  }

  toggleFavourite(event: Event) {
    event.stopPropagation();

    this.favouriteService.toggleFavourite(this.product.uid).subscribe({
      next: () => {
        this.favouriteService.updateFavouritesLocally(this.product.uid);
      },
      error: (err) => {
        console.error('Error toggling favourite:', err);
      }
    });
  }

收藏组件展示逻辑

export class FavouritesComponent implements OnInit {
  favouriteProducts: PrimitiveProduct[] = [];

  constructor(private favouriteService: FavouriteService) {}

  ngOnInit() {
    this.favouriteService.fetchFavourites();
    this.favouriteService.favourites$.subscribe((products) => {
      this.favouriteProducts = products;
    });
  }
}

问题排查与修复方案 #

用BehaviorSubject维护状态是正确方向，不需要依赖localStorage，问题集中在以下几个细节：

1. 缺失依赖注入
   updateFavouritesLocally方法中调用了productService，但服务构造函数未注入该依赖，会导致报错中断状态更新。需要补充注入：

   constructor(private http: HttpClient, private productService: ProductService) {}
   

2. 本地状态与后端同步问题
   本地判断isAlreadyFavorite可能和后端实际状态不一致（比如并发操作、接口延迟），最稳妥的方式是在接口调用成功后重新拉取最新收藏列表：

   // 修改商品组件的toggleFavourite方法
   toggleFavourite(event: Event) {
     event.stopPropagation();
   
     this.favouriteService.toggleFavourite(this.product.uid).subscribe({
       next: () => {
         // 重新拉取确保状态完全同步
         this.favouriteService.fetchFavourites();
       },
       error: (err) => {
         console.error('Error toggling favourite:', err);
       }
     });
   }
   

3. 订阅完整性与内存泄漏
   确保每个商品组件正确订阅favourites$，同时添加订阅销毁逻辑避免内存泄漏：

   import { takeUntil } from 'rxjs';
   import { Subject } from 'rxjs';
   
   private destroy$ = new Subject<void>();
   
   ngOnInit() {
     this.favouriteService.favourites$
       .pipe(takeUntil(this.destroy$))
       .subscribe((favourites) => {
         this.isFavourite = favourites.some((fav) => fav.uid === this.product.uid);
       });
   }
   
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
   }
   

4. 优化本地状态更新逻辑（可选）
   如果不想每次重新拉取全量数据，可优化updateFavouritesLocally的数组操作逻辑，确保状态更新的不可变性：

   updateFavouritesLocally(productUid: string) {
     const currentFavourites = this.favouritesSubject.getValue();
     const productIndex = currentFavourites.findIndex(fav => fav.uid === productUid);
   
     if (productIndex !== -1) {
       // 移除收藏：创建新数组避免直接修改原数据
       const updated = [...currentFavourites];
       updated.splice(productIndex, 1);
       this.favouritesSubject.next(updated);
     } else {
       // 添加收藏：获取产品信息后更新
       this.productService.getProductByUid(productUid).subscribe({
         next: (product) => {
           if (product) {
             this.favouritesSubject.next([...currentFavourites, product]);
           }
         }
       });
     }
   }
   

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