Angular嵌套弹窗处理：关闭子弹窗时如何同时关闭父弹窗？

开发Angular Web应用时，会遇到这类嵌套弹窗场景：打开弹窗1后，点击其中的删除按钮唤起弹窗2，需要实现点击弹窗2的“Yes”按钮时，同时关闭两个弹窗。以下是具体实现方案：

核心思路 #

在打开子弹窗（弹窗2）时，监听其关闭事件，当子弹窗返回确认结果时，同时调用父弹窗（弹窗1）的关闭方法。以Angular Material的MatDialog为例，实现步骤如下：

弹窗1组件代码 #

import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Dialog2Component } from './dialog2.component';

@Component({
  selector: 'app-dialog1',
  template: `
    <h2>弹窗1</h2>
    <button mat-button (click)="openDialog2()">删除</button>
  `
})
export class Dialog1Component {
  constructor(
    private dialog: MatDialog,
    public dialogRef: MatDialogRef<Dialog1Component>
  ) {}

  openDialog2(): void {
    // 打开弹窗2
    const dialog2Ref = this.dialog.open(Dialog2Component);

    // 订阅弹窗2的关闭事件
    dialog2Ref.afterClosed().subscribe(result => {
      // 如果用户点击了"Yes"，关闭弹窗1
      if (result === 'confirm') {
        this.dialogRef.close();
      }
    });
  }
}

弹窗2组件代码 #

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog2',
  template: `
    <h2>确认删除？</h2>
    <button mat-button (click)="onCancel()">No</button>
    <button mat-button (click)="onConfirm()">Yes</button>
  `
})
export class Dialog2Component {
  constructor(public dialogRef: MatDialogRef<Dialog2Component>) {}

  onCancel(): void {
    this.dialogRef.close();
  }

  onConfirm(): void {
    // 返回确认标识，通知弹窗1关闭
    this.dialogRef.close('confirm');
  }
}

说明 #

• 通过dialogRef.afterClosed()监听子弹窗的关闭状态，当子弹窗传递confirm标识时，调用父弹窗的close()方法完成关闭。
• 如果使用自定义弹窗组件，核心逻辑一致：保留父弹窗的实例引用，或通过服务传递关闭信号，在子弹窗确认时触发父弹窗的关闭操作。

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