关闭来自不同组件 material 的对话框 angular

Question

我有组件 A，它会打开 material 对话框

组件 A

  openDialog(): void {
    const dialogRef = this.dialog.open(**component B**, {
      width: '1000px',
    });

然后我使用在该对话框中加载图像并使用按钮上传我使用组件 B 将其上传到服务器。现在，当我完成上传图片后，我想从组件 B 关闭该对话框。

组件 B

onUpload() {
  const fd = new FormData(); 
  fd.append('image', this.selectedFile);
  this.service.uploadImage(fd).subscribe(
    (res:any)=>
    {
//how to close dialog here ?

    },

我该怎么做？

Answer 1

Dialog | Angular Material Documentation:

Components created via MatDialog can inject MatDialogRef and use it to close the dialog in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the afterClosed promise

export class ComponentB {
  constructor(
    public dialogRef: MatDialogRef<ComponentB>
  ) {}

  onUpload(): void {
    // upload stuff

    this.dialogRef.close();
  }
}

关闭来自不同组件 material 的对话框 angular

close material dialog from different component angular

angular-material

angular

material-dialog