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

Posted 2023-02-25

【中文标题】如何根据对话框组件中的取消和是按钮更新父组件的材质幻灯片切换值？

【英文标题】：How to update Material Slide toggle value of Parent componemt based on Cancel And Yes button from Dialog Component?

【发布时间】：2020-04-16 09:06:06

【问题描述】：

我在 Employee 组件中有一个“Manager”滑动开关，它最初会ON（如果 managerFlag='Y'）或OFF（如果 managerFlag='N'）基于来自数据库的 ma​​nagerFlag 值， 为此，我在 ngOnInit() 中使用了 checked 变量和检查条件，并将 [checked]="checked" 放在 html 管理器切换按钮中。

当我点击 Manager 切换时，我会得到 Manager 组件的对话框，它有两个方法 YES 和 CANCEL。如果我点击 CANCEL 按钮，切换应该保持其原始状态。

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

在下面找到 EmployeeForm 的快照。 初始形式。

单击管理器切换。

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

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

【问题讨论】：

@***.com/users/10919587/robert-nish@https://…

【参考方案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
);

【讨论】：

它工作正常，但更新按钮未在第一次点击时提交数据。

抱歉，不明白，因为在您的屏幕截图上看不到更新按钮。你能用你的实际代码更新你的 stackblitz 以便我可以帮助你吗？