Angular中执行删除操作后如何刷新重载子组件app-deal-partners

实现方法（两种常用方案） #

方案1：通过*ngIf销毁重建子组件（改造成本最低） #

利用Angular的*ngIf指令特性，变量为false时子组件会被销毁，变量变回true时会重新初始化渲染，完全符合你重新加载子组件的需求。

1. 先在transaction组件的ts中新增控制变量

// transaction.component.ts
// 新增变量，默认值为true
showDealPartners: boolean = true;

2. 修改transaction.component.html，给子组件加*ngIf控制

<div style="padding-bottom: 20px;">
  <app-deal-partners *ngIf="showDealPartners" [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>
</div>

3. 在delete函数的删除成功回调中触发刷新逻辑

delete(rowData: any) {
  this.isLoading = true;
  this.Service.delete(rowData.id)
    .pipe(finalize(() => { this.isLoading = false;}))
    .subscribe({
      next: (res) => {
        // 新增刷新逻辑
        this.showDealPartners = false;
        // 等待Angular完成一次变更检测后再恢复显示，触发子组件重建
        setTimeout(() => {
          this.showDealPartners = true;
        }, 0);
      },
      error: (err) => {
        this.notificationService.showError('Something went wrong, Try again later.');
        this.isLoading = false;
      },
      complete: () => {
        this.isLoading = false;
      },
    });
}

方案2：父组件调用子组件暴露的刷新方法（性能更优） #

不需要销毁重建子组件，直接触发子组件内部重新拉取数据渲染，适合子组件比较复杂、重建开销高的场景。

1. 先在app-deal-partners子组件的ts中封装公共刷新方法，把你初始化加载列表数据的逻辑放到这个方法里：

// app-deal-partners.component.ts
// 把原来ngOnInit里加载表格数据的逻辑抽成这个公共方法
refresh() {
  // 这里写你原来加载data列表的逻辑，拉取最新数据后赋值给this.data，表格会自动刷新
  this.loadTableData();
}

2. 在transaction父组件中通过@ViewChild拿到子组件实例：

// transaction.component.ts
import { ViewChild } from '@angular/core';
import { AppDealPartnersComponent } from './xxx/app-deal-partners.component'; // 替换成你实际的子组件路径

// 类中新增属性
@ViewChild(AppDealPartnersComponent) dealPartnersComp: AppDealPartnersComponent;

3. 在delete函数的删除成功回调中调用子组件的刷新方法：

delete(rowData: any) {
  this.isLoading = true;
  this.Service.delete(rowData.id)
    .pipe(finalize(() => { this.isLoading = false;}))
    .subscribe({
      next: (res) => {
        // 调用子组件刷新方法
        this.dealPartnersComp.refresh();
      },
      error: (err) => {
        this.notificationService.showError('Something went wrong, Try again later.');
        this.isLoading = false;
      },
      complete: () => {
        this.isLoading = false;
      },
    });
}

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