从不同的组件角度关闭材质对话框 [英] close material dialog from different component angular

问题描述

我有A组件，可以打开材料对话框

I have component A which openes material dialog

组件A

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

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

then I use to load image in that dialog and with button upload I upload it using component B to the server. Now when I've finished uploading image I want to close that dialog from component B.

组件B

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

    },

我该怎么做?

推荐答案

对话框|角材料文档:

通过MatDialog创建的组件可以注入MatDialogRef并使用它关闭包含它们的对话框.关闭时，可以提供可选的结果值.此结果值作为afterClosed承诺的结果转发

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<DialogOverviewExampleDialog>
  ) {}

  onUpload(): void {
    // upload stuff

    this.dialogRef.close();
  }
}

这篇关于从不同的组件角度关闭材质对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！