打开角度材料对话框时，父组件应处于活动状态

Question

我在我的项目中实现了角度材质对话框，我还使对话框可拖动。一切正常。现在我有一个新要求，我应该在打开对话框时保持父组件处于活动状态。任何人都知道如何实现这一目标？

Answer 1

您可以添加一个类以根据对话框禁用特定部分。

在您的组件中，您可以添加一个变量来标识对话框状态。

openDialog(): void {
this.dialogActive = true;
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal},
  hasBackdrop: false
});

dialogRef.afterClosed().subscribe(result => {
  this.dialogActive = false;
  console.log('The dialog was closed');
  this.animal = result;
});

} }

您可以根据对话框状态向 HTML 添加一个类。

<div [class.modal-page-disable]="dialogActive"> disable part </div>
<div> enable part </div>

然后最后添加样式以禁用该部分。

.modal-page-disable {
   pointer-events: none;
   background: transparent;
   opacity: 0.5;
}

您可以参考示例代码here。