Question

我有 A组件，它会触发MatDialog

  openDialog(): void {
   // console.log('The dialog was opened');

    const dialogRef = this.dialog.open(PicuploadComponent, {
      width: '1000px',
      //data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
// I want to get data from upload response here! **res**
    });
  }

此组件会触发 PicuploadComponent ，我会在其中上传图片并收到一些数据的响应

onUpload() {
  const fd = new FormData(); 
  fd.append('image', this.selectedFile);
  this.service.uploadImage(fd).subscribe(
    (res:any)=>
    {
      console.log(res) ;
      this.dialogRef.close();
    },    
  );
}

Answer 1

在 PicuploadComponent 中尝试此操作：

this.dialogRef.close(res);

访问 A组件中的资源：

dialogRef.afterClosed().subscribe(result => {
  console.log(result)
});

Answer 2

当您关闭对话框时。

this.dialogRef.close({data:'data'});

然后对话框完全关闭。

let dialogRef = this.dialog.open(PicuploadComponent, dialogConfig).afterClosed()
  .subscribe(response => {
    console.log(response);
  });

让我知道是否有任何疑问。谢谢。

Answer 3

您应该将uploadImage调用中的结果传递给this.dialogRef.close()方法。请参阅其文档https://material.angular.io/components/dialog/overview

中的示例

将数据从一个组件传输到另一角度

3 个答案: