Angular中如何通过Observable实现子组件通知父组件更新销售列表？

问题原因 #

当前HubService的getSales()方法通过of()创建Observable，仅会一次性发射当前sales_list数组，后续数组修改时无法主动通知订阅者。这导致删除操作后，父组件SalesListComponent无法感知数据变化，必须刷新页面才能看到更新。

解决方案 #

核心思路是用BehaviorSubject替代普通数组管理销售数据，它能实时跟踪数据状态，并在数据变更时自动推送更新给所有订阅者。

1. 修改HubService，使用BehaviorSubject管理数据源 #

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

@Injectable({ providedIn: 'root' })
export class HubService {
  // 用BehaviorSubject保存销售数据，初始值从缓存获取
  private salesSubject = new BehaviorSubject<sales[]>(getCachedSales());
  // 对外暴露只读Observable，防止外部直接修改Subject状态
  sales$: Observable<sales[]> = this.salesSubject.asObservable();

  constructor() {}

  getSales(): Observable<sales[]> {
    return this.sales$;
  }

  addSale(sale: sales) {
    const currentSales = this.salesSubject.value;
    const updatedSales = [...currentSales, sale];
    this.salesSubject.next(updatedSales);
    saveCacheSales(updatedSales);
  }

  addSales(sales: sales[]) {
    const currentSales = this.salesSubject.value;
    const updatedSales = currentSales.concat(sales);
    this.salesSubject.next(updatedSales);
    saveCacheSales(updatedSales);
  }

  editSales(sales: sales[]) {
    this.salesSubject.next(sales);
    saveCacheSales(sales);
  }

  deleteSales(sales: sales[]) {
    const currentSales = this.salesSubject.value;
    const updatedSales = currentSales.filter(x => x.idDate !== sales?.[0]?.idDate);
    this.salesSubject.next(updatedSales);
    saveCacheSales(updatedSales);
  }
}

• BehaviorSubject会保存当前数据状态，每次调用next()都会推送新数据给所有订阅者
• 对外暴露只读的sales$ Observable，避免外部直接修改内部状态
• 所有数据修改操作都生成新数组（保持不可变性，确保Angular变更检测生效），再推送更新并同步缓存

2. 修改SalesListComponent订阅可观察数据源 #

推荐使用async管道，它会自动管理订阅与取消订阅，简化代码并避免内存泄漏：

export class SalesListComponent {
  salesList$: Observable<sales[]>;

  constructor(public dialog: MatDialog, private hubService: HubService) {
    this.salesList$ = this.hubService.getSales();
  }
}

对应模板修改：

<div class="container">
    <div>
        <h3>Total Venda: R${{totalCashierDay}}</h3>

        <div *ngFor="let sale of salesList$ | async" class="saleCard">
            <app-modal-receipt [sales]="sale"></app-modal-receipt>            
        </div>

    </div>
</div>

当sales$推送新数据时，async管道会自动更新视图，无需手动处理订阅逻辑。

3. 移除ModalReceiptComponent中的页面刷新 #

deleteSales(){
  this.hubService.deleteSales(this.sales);
  // 移除window.location.reload()
}

现在删除操作后，HubService会自动推送最新销售数据，SalesListComponent通过Observable实时感知变化并刷新视图，无需刷新页面。

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