Angular Md-dialog优化：通知后关闭，错误时保持打开

你的核心需求是把对话框的关闭逻辑从「点击创建按钮立即关闭」改成「API请求成功后关闭，失败则保持打开」，我们可以通过将关闭控制权从对话框组件转移到主组件来实现，具体步骤如下：

步骤1：修改对话框组件（CreateExhibitDialogComponent） #

首先，我们需要让对话框的「创建」按钮不再直接关闭对话框，而是发出一个事件通知主组件处理数据：

1. 在组件类中添加@Output事件发射器，用于传递用户输入的展品数据：

import { Component, Output, EventEmitter, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
// 导入你的Exhibit类型

@Component({
  // 保持原有组件元数据不变
})
export class CreateExhibitDialogComponent {
  exhibit: Exhibit = {} as Exhibit; // 初始化你的展品对象
  @Output() createRequest = new EventEmitter<Exhibit>(); // 新增事件发射器

  constructor(
    public dialogRef: MatDialogRef<CreateExhibitDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  // 替换原来的直接close逻辑，改为发出事件
  onCreate() {
    if (this.exhibit.isValid()) { // 保留原有验证逻辑
      this.createRequest.emit(this.exhibit);
    }
  }

  // 保留其他原有方法（比如updateMap、selectLocation等）
}

2. 修改对话框模板中的「创建」按钮，绑定新的onCreate方法：

<button md-raised-button [disabled]="!exhibit.isValid()" color="primary" (click)="onCreate()">
  {{ 'create' | translate }}
  <md-icon>add_circle</md-icon>
</button>

步骤2：修改主组件（ExhibitComponent）的处理逻辑 #

现在主组件需要订阅对话框发出的createRequest事件，处理API请求后再决定是否关闭对话框：

createExhibit(event: any) {
  const context = this;
  this.createDialogRef = this.dialog.open(CreateExhibitDialogComponent, {
    width: '45em',
    data: {}
  });

  // 获取对话框组件实例，订阅创建请求事件
  const dialogInstance = this.createDialogRef.componentInstance;
  dialogInstance.createRequest.subscribe((newExhibit: Exhibit) => {
    // 保留原有经纬度格式处理逻辑
    if (newExhibit.latitude) {
      newExhibit.latitude = newExhibit.latitude.toString().replace(/,/g, '.');
    }
    if (newExhibit.longitude) {
      newExhibit.longitude = newExhibit.longitude.toString().replace(/,/g, '.');
    }

    // 处理API请求
    this.exhibitService.createExhibit(newExhibit)
      .then(() => {
        // 请求成功：显示通知 → 关闭对话框 → 刷新列表
        this.toasterService.pop('success', this.translate('exhibit saved'));
        this.createDialogRef.close(); // 成功后才关闭对话框
        setTimeout(() => {
          context.reloadList();
        }, 1000);
      })
      .catch(error => {
        // 请求失败：仅显示错误通知，对话框保持打开
        this.toasterService.pop('error', this.translate('Error while saving'), error);
      });
  });

  // 对话框关闭后清理引用
  this.createDialogRef.afterClosed().subscribe(() => {
    this.createDialogRef = null;
  });
}

逻辑说明 #

• 现在的流程是：用户点击「创建」→ 对话框验证数据 → 发出创建请求事件 → 主组件接收数据并调用API → API成功则关闭对话框+显示成功通知；API失败则仅显示错误通知，对话框保持打开，用户可以修正数据后再次提交。
• 原有验证逻辑（isValid()）依然保留，确保只有合法数据才会触发API请求。
• 对话框的关闭完全由主组件控制，完美实现了你想要的「通知展示后再关闭」的需求。

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