Как обновить значение переключателя «Слайд материала» родительского компонента на основе кнопки «Отменить и Да» в компоненте диалога?

Question

У меня есть один слайд-переключатель " Manager " в Employee Компонент, который будет изначально ON (если managerFlag = 'Y') или OFF (если managerFlag = 'N') на основе значения managerFlag , поступающего из базы данных, для этого я использовал checked переменную и проверку условия в ngOnInit () и поместил [checked]="checked" в HTML кнопку переключения диспетчера.

Когда я нажму на переключатель Диспетчер , я получу диалог Диспетчер Компонент, который есть два метода ДА и ОТМЕНА . Если я нажимаю кнопку ОТМЕНА , переключатель должен сохранять свое первоначальное состояние.

Когда я нажимаю кнопку ДА, значение переключателя должно обновляться с ВЫКЛ до ВКЛ. и наоборот, чтобы предоставить / отозвать доступ менеджера для этого Сотрудника.

найдите ниже снимок EmployeeForm. Первоначальная форма.

при щелчке диспетчера.

Пожалуйста, найдите код в URL ниже. StackBlitz

Может ли кто-нибудь помочь мне в этом? Заранее спасибо за помощь.

Answer 1

Все, что вам нужно знать, это описать здесь в официальной документации Angular Материал https://material.angular.io/components/dialog/overview.

Вы должны создать компонент для вашего диалога и добавить его в entryComponents вашего приложения-модуля. Скажем, вы называете его ConfirmDialog, а затем в компоненте, в котором вы хотите открыть диалоговое окно

const dialogRef = this.dialog.open(ConfirmDialog);

В вашем шаблоне ConfirmDialog установите директиву mat-dialog-close, чтобы отправлять обратно результат, когда пользователь нажимает YES ( true) или CANCEL (false):

<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="true" >YES</button>
  <button mat-button [mat-dialog-close]="false" cdkFocusInitial>CANCEL</button>
</div>

В подписке метода afterClosed у вас будет либо значение true, либо false в качестве аргумента вашего обратного вызова, и вы должны установить состояние своей кнопки переключения

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  // The result should be true or false
  // Affect this value to the checked state of your switch button
});