从 MatDialogConfig 到 MatDialog 的数据

Question

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

• 传递一个数组让我们说 this.array 到 FirstModalComponent
• 将标志传递给 Save = true，这样我就可以根据这个标志在父级中执行操作

我已经看到有关关闭 ModalNewComponent 以在 close 方法中传递信息的信息，但是我如何在 FirstModalComponent 中取回该信息，因为 close 是在 ModalNewComponent 的 html 上调用的，而不是在它的父组件中调用的？ 基本上，如何将数据从 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);
    }
 })