如何在子组件Angular中使用observable通知父组件？

Question

有这个父组件'SalesListComponent'

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

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

    </div>
</div>

它渲染了许多我在多个地方使用的子组件“ModalReceiptComponent”。

可视化（红色：父组件，绿色：子组件）

我正在尝试学习观察者并使用这种方法

export class HubService {
  sales_list: sales[] = [];
  
  constructor() { 
    this.sales_list = getCachedSales();
  }

  getSales() {
    const sales = of(this.sales_list);
    return sales;
  }

  addSale(sale: sales) {
    this.sales_list.push(sale);
    saveCacheSales(this.sales_list);
  }

  addSales(sale: sales[]) {
    this.sales_list = this.sales_list.concat(sale);
    saveCacheSales(this.sales_list);
  }

  editSales(sales: sales[]){
    this.sales_list = sales;
    saveCacheSales(this.sales_list);
  }

  deleteSales(sales: sales[]){
    this.sales_list = this.sales_list.filter(x => x.idDate !== sales?.[0]?.idDate);
    this.editSales(this.sales_list);
  }

使用“of”观察者方法处理销售列表中的 CRUD 的服务。

在'sales-list-component.ts'中只需订阅构造函数中的道具列表

export class SalesListComponent {
  salesList: sales[] = [];
  
  constructor(public dialog: MatDialog, private hubService: HubService) {
    this.hubService.getSales().subscribe(sales => {
      this.salesList = sales;
    });
  }

在'modal-receipt-component.ts'中我在点击事件中使用了删除方法

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

问题是，在不重新加载整个页面的情况下，我无法识别 salesList 更新的事件和“重新渲染”父组件以更新新的 salesList 而无需删除记录。

有人可以帮助我吗？

到目前为止，只有 window.location.reload() 已经解决。

Answer 1

首先在父级中为构造函数中的代码创建一个新方法并在

constructor

上调用它，然后移动删除销售

export class SalesListComponent {
  salesList: sales[] = [];

  refreshSales() {
    this.hubService.getSales().subscribe(sales => {
      this.salesList = sales;
    });
  }
  
  constructor(public dialog: MatDialog, private hubService: HubService) {
    this.refreshSales();
  }

  deleteSales(sales: any){
      this.hubService.deleteSales(sales);
      this.refreshSales();
    }
  }
}

然后你需要做一个事件发射器并从 html 触发事件

总销售量：R${{totalCashierDay}}

    <div *ngFor="let sale of salesListAggrouped" class="saleCard">
        <app-modal-receipt [sales]="sale" (deleteEmitter)="deleteSales($event)></app-modal-receipt>            
    </div>

</div>

在子组件中，您需要触发发射器。

@Output() deleteEmitter: EventEmitter<any> = new EventEmitter<void>();

deleteSales(){
      this.deleteEmitter.emit(this.sales);
    }
  }