如何打开 MatDialog 并传递 MatDialogRef答案

【问题标题】：how to open MatDialog and pass MatDialogRef如何打开 MatDialog 并传递 MatDialogRef
【发布时间】：2019-11-09 12:03:09
【问题描述】：

我正在开发一个 Angular 应用程序。我尝试使用 MatDialog 打开一个对话框并尝试将其关闭

我这样打开对话框

openDialog(event) {
  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  dialogConfig.position = {
    top:  bottom + 'px',
    right: '0px'
  };
  dialogConfig.width = '50%';
  dialogConfig.height = '590px';

  this.dialog.open(UserDialogComponent, dialogConfig);

  const dialogRef = this.dialog.open(UserDialogComponent, dialogConfig);

  dialogRef.beforeClose().subscribe((result: string) => {
    console.log('RIght before close,', result);
  });
  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed', result);
  });
}

我在UserDialogComponent的构造函数中注入了MatDialogRef：

constructor(
    private formBuilder: FormBuilder,
    private dialogRef: MatDialogRef<UserDialogComponent>,
    @Inject(MAT_DIALOG_DATA) data) {
      console.log("Constructor UserDialogComponent START");
      console.log(dialogRef);
      this.dialogRef = dialogRef;
      console.log("Constructor UserDialogComponent END");
     }

为了关闭对话框，我使用了这个函数

  close() {
    console.log(this.dialogRef);
    console.log('CLOSE CLICKED');
    this.dialogRef.close(true);
  }

但是 this.dialogRef 是一个空对象，当我调用这个函数时收到以下错误

ERROR TypeError: "this.dialogRef.close is not a function"

你能帮帮我吗？

【问题讨论】：

我真的很困惑。我删除了它，但我仍然有错误
可以分享对话框组件的代码吗？
是的，现在尝试删除之前关闭代码。它必须工作正常

标签： angular angular-material

【解决方案1】：

你让我在路上

有这个代码

@Component({
  selector: 'app-user-dialog',
  templateUrl: './user-dialog.component.html',
  styleUrls: ['./user-dialog.component.scss'],
  providers: [
    {provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }},
    { provide: MatDialogRef, useValue: {} }
  ]
})
export class UserDialogComponent implements OnInit {

我删除了

{ provide: MatDialogRef, useValue: {} }

现在可以正常使用了

【讨论】：

【解决方案2】：

删除此this.dialogRef = dialogRef; 并尝试

 @Inject(MAT_DIALOG_DATA) data) {
      console.log("Constructor UserDialogComponent START");
      console.log(dialogRef);
      this.dialogRef = dialogRef; // delete this line
      console.log("Constructor UserDialogComponent END");
     }

【讨论】：