Angular开发：MatDialog打开后MatDialogRef调用close报错求助

看起来你遇到的问题根源有几个地方，我帮你一步步排查并修复：

首先，你在openDialog函数里连续调用了两次this.dialog.open()，这会打开两个对话框，而且第一次打开的对话框没有保存引用——虽然这不是导致dialogRef为空的直接原因，但这是一个明显的错误，先修正这个。

其次，你的UserDialogComponent构造函数里做了冗余的赋值this.dialogRef = dialogRef;，其实依赖注入已经帮你把MatDialogRef实例赋值给类的dialogRef属性了，这行代码完全多余，甚至可能在某些情况下导致问题，直接删掉。

另外，要确保你的close函数的this指向正确，如果是在模板里用(click)="close()"调用，通常没问题，但如果是用其他方式绑定事件（比如通过addEventListener），可能会丢失this指向，这时候可以把close改成箭头函数来规避。

下面是完整的修复代码：

1. 修正打开对话框的函数 #

openDialog(event) {
  // 确认bottom变量已正确定义（这里假设你已有该变量的有效值）
  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  dialogConfig.position = { top: bottom + 'px', right: '0px' };
  dialogConfig.width = '50%';
  dialogConfig.height = '590px';

  // 只调用一次open，保存对话框引用
  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);
  });
}

2. 修正UserDialogComponent的构造函数 #

constructor(
  private formBuilder: FormBuilder,
  // 改成public，方便模板直接访问
  public dialogRef: MatDialogRef<UserDialogComponent>,
  @Inject(MAT_DIALOG_DATA) public data: any
) {
  console.log("Constructor UserDialogComponent START");
  console.log(dialogRef);
  // 删掉冗余的this.dialogRef = dialogRef;
  console.log("Constructor UserDialogComponent END");
}

3. 修正close函数（或直接用模板调用） #

如果还是想用自定义的close函数：

close() {
  console.log(this.dialogRef);
  console.log('CLOSE CLICKED');
  // 添加判断避免空指针异常
  if (this.dialogRef) {
    this.dialogRef.close(true);
  }
}

模板里的按钮绑定：

<button (click)="close()">关闭对话框</button>

或者更简便的方式，直接在模板里调用注入的dialogRef（因为已经设为public）：

<button (click)="dialogRef.close(true)">关闭对话框</button>

最后检查模块配置 #

确保你的模块里正确导入了MatDialogModule，并且UserDialogComponent已在declarations数组中声明（Angular 9+之后无需添加到entryComponents，旧版本需要）：

import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
import { UserDialogComponent } from './user-dialog.component';

@NgModule({
  declarations: [UserDialogComponent],
  imports: [MatDialogModule],
  // Angular 8及以下版本需要添加这一行
  // entryComponents: [UserDialogComponent]
})
export class YourModule { }

这样修改后，应该就能正常关闭对话框了。

内容的提问来源于stack exchange，提问作者flamant