Angular中打开MatDialog时如何禁用父窗口（不可编辑）

默认情况下MatDialog的遮罩仅阻止点击背景关闭对话框，但父页面的可交互元素（如输入框、按钮）仍能被编辑。可以通过以下两种方式实现父窗口禁用：

方法一：通过CSS类控制父元素交互状态 #

这种方法适合全局禁用父页面所有元素的交互，同时添加视觉上的禁用效果。

1. 添加全局/组件级CSS样式

/* 父元素禁用类 */
.parent-disabled {
  pointer-events: none;
  opacity: 0.6;
}
/* 确保表单控件也被禁用 */
.parent-disabled input,
.parent-disabled button,
.parent-disabled select,
.parent-disabled textarea {
  pointer-events: none;
  opacity: 0.6;
}

2. 修改TestComponent代码，监听对话框状态

import { Component, Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';

export class TestComponent {
  isDialogOpen = false; // 标记对话框是否打开

  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.displayWindow();
  }
    
  displayWindow() {
    const dialogRef = this.dialog.open(MyDialog, {
      height: '360px',
      width: '600px',
      data: {
        text : 'Selected Inputs'
      },
      disableClose: true // 可选：阻止点击背景关闭对话框
    });

    // 对话框打开时设置父元素禁用状态
    this.isDialogOpen = true;

    // 对话框关闭时恢复父元素状态
    dialogRef.afterClosed().subscribe(() => {
      this.isDialogOpen = false;
    });
  }
          
  @Component({
    selector: 'app-my-dialog',
    template: `<div style="text-align: center"><h2>Hi</h2><br><br>{{mydata.text}}<br><br><button mat-raised-button mat-dialog-close>Ok</button></div>`,
  })
  export class MyDialog {
    constructor(@Inject(MAT_DIALOG_DATA) public mydata: any) { }
  }
}

3. 在TestComponent的模板根元素绑定禁用类

<!-- 父组件根容器 -->
<div [class.parent-disabled]="isDialogOpen">
  <!-- 父组件所有内容，包括打开对话框的按钮 -->
  <button mat-raised-button (click)="openDialog()">打开对话框</button>
  <!-- 其他表单控件、文本内容等 -->
</div>

方法二：针对Angular表单禁用整个表单 #

如果父组件使用了Angular响应式表单或模板驱动表单，可以直接禁用整个表单：

1. 修改TestComponent代码（假设父组件有表单）

import { Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { NgForm } from '@angular/forms';

export class TestComponent {
  @ViewChild('parentForm') parentForm: NgForm; // 获取表单实例

  constructor(private dialog: MatDialog) {}

  displayWindow() {
    const dialogRef = this.dialog.open(MyDialog, {
      height: '360px',
      width: '600px',
      data: {
        text : 'Selected Inputs'
      }
    });

    // 禁用整个表单
    this.parentForm.form.disable();

    // 对话框关闭时恢复表单
    dialogRef.afterClosed().subscribe(() => {
      this.parentForm.form.enable();
    });
  }

  // ... 其他代码不变
}

2. 父组件模板中的表单添加模板引用变量

<form #parentForm="ngForm">
  <!-- 表单控件 -->
  <input type="text" name="example" ngModel>
  <button mat-raised-button (click)="openDialog()">打开对话框</button>
</form>

注意事项 #

• 确保已在模块中导入MatDialogModule、MatButtonModule以及ReactiveFormsModule/FormsModule（如果使用表单）。
• disableClose配置仅用于阻止点击背景关闭对话框，不会自动禁用父元素。

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