时间戳

首页 > 解决方案 > 如何根据对话框组件中的取消和是按钮更新父组件的材质幻灯片切换值？

angular-material - 如何根据对话框组件中的取消和是按钮更新父组件的材质幻灯片切换值？

问题描述

我在员工组件中有一个“经理”滑动开关，根据来自数据库的managerFlag值，它将最初打开（如果 managerFlag='Y'）或关闭（如果 managerFlag='N'） ，为此我使用了检查变量并检查ngOnInit()中的条件并将其放置在 HTML 管理器切换按钮中。[checked]="checked"

当我点击管理器切换时，我会得到管理器组件的对话框，它有两种方法YES和CANCEL。如果我单击取消按钮，切换应保持其原始状态。

当我单击“是”按钮时，切换值应从“关闭”更新为“打开” ，反之亦然，以提供/撤销该员工的经理访问权限。

在下面找到 EmployeeForm 的快照。初始形式。 在此处输入图像描述

单击管理器切换。 在此处输入图像描述

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

有人可以帮助我吗？提前感谢您的帮助。

标签： angular-materialmodal-dialogparent-childslidetoggletwo-way-binding

解决方案

您需要知道的所有内容都在 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
});

推荐阅读