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

Question

在 Angular 中，如何关闭此对话框？

我找不到解决方案。

import { MtxDialog } from '@ng-matero/extensions/dialog';

  openAddUserModal() {
    const dialogRef = this.dialog.originalOpen(AddUsersComponent, {
      width: '500px',
      data: { SubmitClose: true }
      
    });
  
    dialogRef.afterClosed().subscribe((result: any) => {
      console.log('The dialog was closed', result);
      if (result === 'success') {
        this.fetchData(this.pageIndex, this.pageSize);
      }
    });
  }

我尝试了这种有角的材料，它起作用了：

import { MatDialog } from '@angular/material/dialog'

；

但我想要这个：

import { MtxDialog } from '@ng-matero/extensions/dialog';

Answer 1

从对话框组件关闭对话框

在“AddUsersComponent”中，您将注入“MtxDialogRef”来管理对话框实例。然后您可以关闭对话框并将结果传回。

您可以通过在“AddUsersComponent.ts”中使用以下代码来实现此目的

从“@angular/core”导入{组件，注入}； 从 '@ng-matero/extensions/dialog' 导入 { MtxDialogRef, MTX_DIALOG_DATA };

@组件({ 选择器：'应用程序添加用户'， templateUrl: './add-users.component.html', styleUrls: ['./add-users.component.css'] })

导出类AddUsersComponent { 构造函数（ 私人dialogRef：MtxDialogRef， @Inject(MTX_DIALOG_DATA) 公共数据：任意 ）{}

closeDialog（结果：字符串）{ this.dialogRef.close(结果); }

onSubmit() { // 这里是你的表单提交逻辑

// Close the dialog with a result
this.closeDialog('success');

}

onCancel() { // 关闭对话框，没有任何结果 this.closeDialog('取消'); } }

更新对话框模板

<form (ngSubmit)="onSubmit()">
  <!-- Your form fields here -->
  <button type="submit">Submit</button>
  <button type="button" (click)="onCancel()">Cancel</button>
</form>