从 MatDialogConfig 到 MatDialog 的数据

Question

我有这个打开 ModalNewComponent 的 FirstModalComponent。在打开的模式 (ModalNewComponent) 中，我有一个保存按钮，我需要它：

传递一个数组让我们说 this.array 到 FirstModalComponent
将 flag 传递给 Save = true，这样我就可以根据这个 flag

我已经看到有关关闭 ModalNewComponent 以在 close 方法中传递信息的信息，但是我如何在 FirstModalComponent 中取回该信息，因为 close 是在 ModalNewComponent 的 html 上调用的，而不是在它的parent？基本上，如何将数据从 ModalNewComponent 获取到 FirstModalComponent？谢谢

这来自 FirstModalComponent:

dialogConfig = new MatDialogConfig();

constructor(public matDialog: MatDialog) { }

openModal(id: string) {
    this.dialogConfig.data = {      
      initPage: (id == "open-search-modal") ? 'open' : 'new'
    };

    // Closes itself
    this.matDialog.closeAll();        
    
    // Opens the modal ModalNewComponent
    const modalDialog = this.matDialog.open(ModalnewComponent, this.dialogConfig);   
    }

这来自 ModalNewComponent:

constructor(
   public dialogRef: MatDialogRef<ModalnewComponent>,
   @Inject(MAT_DIALOG_DATA) data: any) {
   this.initPage = data.initPage;
 }

async save() {
    this.toSave = true;   
    this.array = [1,2,3]; 
 }

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

Answer 1

在您的 ModalNewComponent 组件中，当关闭模式时，您可以发送所需的数据以传递到您的 FirstModalComponent，例如：

closeModal() {
   this.dialogRef.close({ 
     save: this.toSave, 
     theData: 'This is the data I want to pass around' 
   });
}

然后在您的 FirstModalComponent 组件中，您需要订阅 matDialog 以在关闭时从 ModalNewComponent 获取数据

this.matDialog
 .open(ModalnewComponent, this.dialogConfig)
 .afterClosed()
 .subscribe((response) => {
    if (response.save) {
       // do something with response theData
       console.log('the Data:', response.theData);
    }
 })

从 MatDialogConfig 到 MatDialog 的数据

Data from MatDialogConfig to MatDialog

angular

typescript

mat-dialog