如何基于对话框组件中的“取消并是”按钮更新父组件的“材料幻灯片”切换值？

Question

我在Employee组件中有一个“ Manager”幻灯片切换按钮，该组件最初为ON（如果managerFlag ='Y'）或OFF（如果managerFlag =' N'）基于来自数据库的managerFlag值，为此，我在ngOnInit（）中使用了[[checked变量并检查了条件，并将此[checked]="checked"放置在HTML Manager切换按钮中。

当我单击

Manager

切换按钮时，将显示Manager组件的对话框，该对话框具有两种方法YES和CANCEL。如果单击CANCEL按钮，切换按钮应保持其原始状态。当我单击“是”按钮时，切换值应从

OFF

更新为ON，反之亦然，以提供/撤消该员工的经理访问权限。在下面找到EmployeeForm的快照。初始形式。

单击管理器切换。

请在下面的URL中找到代码。StackBlitz

有人可以协助我吗？预先感谢您的帮助。

Answer 1

您需要了解的所有信息都在Angular Material 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
});