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

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。