角材料对话框答案

【问题标题】：angular material dialog box角材料对话框
【发布时间】：2018-10-17 09:37:41
【问题描述】：

我正在使用角度材质对话框。目前它的开放。但我不知道它是如何使用对话框关闭按钮关闭的。我试了几次，但做不到。请检查以下代码（部分代码）

      constructor(private summaryService: SummaryService,public dialog: MatDialog) { }
  openDialog(): void {
    const dialogRef = this.dialog.open(ConfirmationDialog, {
    });


  }

  closeDialog(){
    alert("test");
    this.dialog.close();
  }

openDialog() 运行良好。我在 colseDialog() 函数中有两个问题。当我提醒一些文本时，错误“_co.closeDialog 不是函数”。我的 IDE 中显示的其他错误“'MatDialog' 类型上不存在属性 'close'”。你能给出关闭弹出窗口的解决方案吗

【问题讨论】：

this.dialogRef.close(); 而不是this.dialog.close();
错误显示“‘SummaryComponent’类型上不存在属性‘dialogRef’。” summarycomponent 是组件名称\

标签： angular angular-material

【解决方案1】：

尝试在 main.component.ts 中创建 dialogRef 全局变量

dialogRef : MatDialogRef<ConfirmationDialog>

constructor(private summaryService: SummaryService,public dialog: MatDialog) { }

openDialog(): void {
   dialogRef = this.dialog.open(ConfirmationDialog, {
   });
}

closeDialog(){
   alert("test");
   this.dialogRef.close();
}

尝试在您的 ConfirmDialog.component.ts 中进行以下更改

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

onCloseClick(){
  this.dialogRef.close();
}

【讨论】：

现在文本编辑器中没有错误。但是当我点击对话框中的关闭按钮时，控制台出现错误，“ERROR TypeError: _co.closeDialog is not a function”
你的关闭按钮在对话框中，所以你必须在你的对话框组件中调用this.dialogRef.close()

【解决方案2】：

你可以尝试这样的事情，你必须在声明你的 dialogRef 对象的方法中监听 close 事件，否则它将是未定义的。

openDialog(): void {
   const dialogRef = this.dialog.open(ConfirmationDialog);
   dialogRef.afterClosed().subscribe(result => {
      if(result) {
        //Means user clicked on OK button
      }
    });
}

【讨论】：

【解决方案3】：

您可以使用 afterOpened 事件全局获取模态窗口。

export class AppComponent implements OnInit, OnDestroy {
  dialogRef: MatDialog;

  constructor(@Inject(DOCUMENT) private _document: Document, public store: Store, dialog: MatDialog) {
    this.dialogRef = dialog;
    this.dialogRef.afterOpened.subscribe(value => {
      console.log("Some Modal Window Opened");
    })
  }

【讨论】：