Angular中带确认弹窗的删除功能无法触发问题求助

当前问题本质是弹窗组件没有拿到要删除的资源ID，同时删除逻辑和弹窗触发逻辑的调用链路不打通，提供两种可行修复方案：

方案一（推荐）：删除逻辑放在触发弹窗的父组件，弹窗仅做确认交互 #

该方案的优势是弹窗可以通用，不绑定特定业务逻辑。

步骤1：调整弹窗组件代码 #

弹窗的确认按钮只需要返回确认状态即可，不需要绑定删除逻辑：

• 弹窗component.ts 注入弹窗引用：

// PopupComponent.ts 构造函数新增注入
constructor(public dialogRef: MatDialogRef<PopupComponent>) {}

• 弹窗component.html 修改确认按钮逻辑：

<button type="button" class="btn btn-secondary" (click)="dialogRef.close(true)">Confirm Deletion</button>

步骤2：父组件整合删除+弹窗逻辑 #

把你原来写在弹窗组件里的deleteBilling方法移到写popupTest的父组件中，然后修改popupTest如下：

// 父组件.ts
// 保留原有删除逻辑
deleteBilling(id: string) {
  this.billingservice.deleteBilling(id).subscribe(
    resp => {
      console.log(resp);
      this.displayBilling()
    },
    err => console.error(err)
  );
}

popupTest(id: string) {
  this.popupService.dialogOpen('Are you sure you want to delete?')
    .afterClosed().subscribe(resp => {
      // 用户点击确认后直接调用当前组件的删除方法
      if (resp) {
        this.deleteBilling(id);
      }
    });
}

方案二：删除逻辑保留在弹窗组件内 #

如果你不需要复用弹窗，要把逻辑都放在弹窗里，操作如下：

步骤1：打开弹窗时传递要删除的ID #

修改popupTest，打开弹窗时把ID作为参数传入：

popupTest(id: string) {
  this.popupService.dialogOpen('Are you sure you want to delete?', {
    data: { billingId: id }
  })
}

步骤2：弹窗组件接收ID并执行删除 #

• PopupComponent.ts 接收传入的ID：

import { MAT_DIALOG_DATA } from '@angular/material/dialog';
// 构造函数注入
constructor(
  @Inject(MAT_DIALOG_DATA) public data: any,
  private billingservice: BillingService,
  public dialogRef: MatDialogRef<PopupComponent>
) {}

deleteBilling(id: string) {
  this.billingservice.deleteBilling(id).subscribe(
    resp => {
      console.log(resp);
      this.displayBilling();
      // 删除成功后关闭弹窗
      this.dialogRef.close(true);
    },
    err => console.error(err)
  );
}

• PopupComponent.html 绑定按钮逻辑：

<button type="button" class="btn btn-secondary" (click)="deleteBilling(data.billingId)">Confirm Deletion</button>

注：如果你使用的弹窗不是Angular Material，只要你的popupService封装的afterClosed能拿到返回值，上述逻辑通用，仅需要对应调整弹窗传参方式即可。

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