Родительский компонент должен быть активен, когда открыто диалоговое окно angular материала.

Question

Я реализовал angular диалоговое окно материалов в моем проекте, я также сделал диалоговое окно перетаскиваемым. Все работает нормально. Теперь у меня есть новое требование, согласно которому я должен сохранять активным родительский компонент при открытии диалогового окна. Кто-нибудь знает, как этого добиться?

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;
}

вы можете сослаться на образец кода здесь .