如何使用ng Matero Extension的MtxDialog在Angular中关闭对话框？

@ng-matero/extensions/dialog 是基于 Angular Material MatDialog 的封装，关闭逻辑与 MatDialog 基本兼容，以下是两种常见的关闭方式：

1. 在弹窗组件内部关闭 #

在你的 AddUsersComponent 中，注入 MatDialogRef（因为你调用的 originalOpen 直接返回 Angular Material 的 MatDialogRef），然后通过其 close() 方法关闭对话框，还可以传递结果给父组件。

组件代码示例： #

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

@Component({
  selector: 'app-add-users',
  templateUrl: './add-users.component.html'
})
export class AddUsersComponent {
  constructor(
    private dialogRef: MatDialogRef<AddUsersComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  // 取消关闭，不返回结果
  onCancel() {
    this.dialogRef.close();
  }

  // 提交后关闭并返回成功结果
  onSubmit() {
    // 这里先处理表单提交逻辑
    // ...

    // 关闭对话框并传递结果给父组件
    this.dialogRef.close('success');
  }
}

模板按钮示例： #

<button mat-button (click)="onCancel()">取消</button>
<button mat-raised-button color="primary" (click)="onSubmit()">提交</button>

2. 在父组件主动关闭对话框 #

如果需要在父组件中通过外部操作（比如超时、其他按钮触发）关闭对话框，可以保存 dialogRef 实例，直接调用其 close() 方法：

import { MtxDialog } from '@ng-matero/extensions/dialog';
import { MatDialogRef } from '@angular/material/dialog';
import { AddUsersComponent } from './add-users.component';

// 父组件类内
private dialogRef!: MatDialogRef<AddUsersComponent>;

openAddUserModal() {
  this.dialogRef = this.dialog.originalOpen(AddUsersComponent, {
    width: '500px',
    data: { SubmitClose: true }
  });

  this.dialogRef.afterClosed().subscribe((result: any) => {
    console.log('The dialog was closed', result);
    if (result === 'success') {
      this.fetchData(this.pageIndex, this.pageSize);
    }
  });
}

// 主动关闭对话框的方法
closeDialogManually() {
  if (this.dialogRef) {
    this.dialogRef.close('cancelled');
  }
}

补充说明 #

• 你使用的 originalOpen 方法是直接调用 Angular Material MatDialog 的原生 open 方法，因此返回的是 MatDialogRef，所有 MatDialogRef 的 API（如 close()、backdropClick() 等）都可以直接使用。
• 如果后续改用 MtxDialog 的 open 方法（非 originalOpen），返回的是 MtxDialogRef，它封装了 MatDialogRef，关闭方式完全一致，直接调用 close() 即可。

内容的提问来源于stack exchange，提问作者Syed Muhammad Ali Raza