从不同的组件角度关闭材料对话框答案

【问题标题】：close material dialog from different component angular从不同的组件角度关闭材料对话框
【发布时间】：2020-01-09 07:57:54
【问题描述】：

我有打开材质对话框的组件 A

组件 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 ?

    },

我该怎么做？

【问题讨论】：

你能告诉我们你到目前为止得到了什么（代码）吗？
当然，抱歉刚刚编辑了我的问题

标签： angular angular-material material-dialog

【解决方案1】：

Dialog | Angular Material Documentation:

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

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

  onUpload(): void {
    // upload stuff

    this.dialogRef.close();
  }
}

【讨论】：