angular - 打开角度材质对话框时如何禁用背景页面中的所有控件/单击

Question

我正在使用角度材质对话框（v7），我们在对话框和下面的页面中有可编辑的单元格，我们也有可编辑的单元格，如文本区域/文本输入。

当我按下 ctrl+z 打开对话框时，撤消在对话框和背景页面中工作的操作

如何在打开对话框时禁用后台页面中的所有控件（如 ctrl+z）。

有关问题的实时示例，请查看以下页面中的最后一个示例 https://material.angular.io/components/dialog/examples

Answer 1

在做了一些研究后，我发现这是 HTML 输入的默认行为，

如果您在这里两次撤消最后一个输入，那么前一个输入将自动获得焦点。

解决此问题的一种方法是进行所有先前的输入readonly

openDialog(): void {
  this.readonly = true;
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog);

  dialogRef.afterClosed().subscribe((result) => {
    this.readonly = false;
  });
}

<mat-form-field>
  <input
    matInput
    [(ngModel)]="name"
    placeholder="What's your name?"
    [readonly]="readonly"
  />
</mat-form-field>

Stackblitz 示例在这里