Angular 7项目中Material UI对话框点击无响应，无法打开

核心错误点及修复方案 #

• 事件绑定大小写错误：Angular DOM事件绑定要求小写，你HTML里用的(Click)无法触发方法，必须改成(click)。
• 对话框服务引用错误：你已经把MatDialog注入到matdialog变量，但openDialog里调用的是未初始化的this.dialog.open，应该替换为this.matdialog.open。
• 组件命名规范（可选但推荐）：Angular组件类名遵循大驼峰命名法，建议把passportDialog改为PassportDialog，对应MatDialogRef<PassportDialog>也要同步修改。
• 避免循环打开自身（若适用）：如果你的目标是打开其他对话框组件，要确保open方法传入的是正确的组件类，而非当前组件本身，否则会引发循环引用问题。

修改后的代码示例 #

TypeScript文件

@Component({
  selector: "passport-dialog",
  templateUrl: "passport.html",
})
export class PassportDialog {
  constructor(
    public dialogRef: MatDialogRef<PassportDialog>,
    public matDialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  public openDialog() {
    console.log("inside open dialog function");
    // 若要打开其他组件，替换此处的PassportDialog为目标组件类
    this.dialogRef = this.matDialog.open(PassportDialog, {
      disableClose: true,
      width: "200px",
      height: "200px",
    });
  }
}

HTML模板文件

<div
  style="cursor: pointer"
  fxLayout="row"
  fxLayoutAlign="end center"
  class="passwordValidtion"
  *ngIf="!masterInfo?.EMP_DATA?.passport_no"
  (click)="openDialog()"
>
  No Passport details available
</div>

额外检查项 #

• 确认MatDialogModule已导入到对应NgModule中，否则对话框服务无法正常初始化。
• 检查控制台Verbose模式，部分隐性错误可能不会在默认日志中显示。

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