当我点击取消确认时，mat-slide-toggle 不应该改变它的状态 window

Question

当我检查滑动开关时，它应该按预期工作。但是当我尝试取消选中它时，会出现一个确认 window 询问您是否确定。当我在该确认 window 中单击取消时，切换仍然更改为未选中，这不应该发生。它应该保持相同的状态。

这是我的 Html 和 TS 代码

// html
<mat-slide-toggle 
   (change)="change($event)" [checked]="isChecked()" >
     To-pay
   </mat-slide-toggle>

TS代码：

// ts
    change(e) {
       if(this.checked) {
           if(confirm("Are you sure")) {
              console.log("toggle")
           }
           else {
              e.stopPropagation();
                console.log("toggle should not change if I click the cancel button")
           }
        }
    }

当尝试取消选中切换按钮时出现确认 window 并且我单击那里的取消选项时，切换应该不会发生任何事情。 stopPropagation() 也不起作用。

Edit1 ：我尝试在 else 语句中做 return false。没用。甚至试图改变 e.checked = false。它只是改变了事件对象的值，但没有阻止切换滑动

Answer 1

我认为问题是 (change)="eventHandler()" 将在值更改后触发，而 (ngModelChange)="eventHandler()" 将在值更改前触发

Answer 2

遗憾的是，您不能将 stopPropagation 与 mat-slide-toggle 一起使用，您需要以编程方式将选中的值设置回 true 在您的 else 条件下的事件上。

else {
    e.source.checked = true;
    console.log("toggle should not change if I click the cancel button")
}

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

Answer 3

我使用 MatDialog 作为确认 window，我注意到以下行为： 当 MatDialog 打开时，mat-slide-toggle 显示为 false / unchecked 值，即使用户尚未做出决定：

演示： https://stackblitz.com/edit/angular-79yf7m-4gdxbu?file=app/slide-toggle-overview-example.ts

那是因为 change 事件在 mat-slide-toggle 值更改后 触发。

为了解决这个问题，我们必须在 change 事件触发后立即将值重置为其之前的值 (true)，然后让用户决定，如果它确认操作，我们将相应地更新值。

代码为：

change(e) {
  if (this.checked) {
    // at first, reset to the previous value
    // so that the user could not see that the mat-slide-toggle has really changed
    e.source.checked = true;

    const dialogRef = this.dialog.open(ConfirmDialogComponent);
    dialogRef.afterClosed().subscribe(response => {
      if (response) {
       this.checked = !this.checked;
      }
    })
  } else {
    this.checked = !this.checked;
  }
}

演示：https://stackblitz.com/edit/angular-79yf7m-yzwwc7?file=app%2Fslide-toggle-overview-example.ts

Answer 4

您可以通过侦听点击事件然后 event.preventDefault() / event.stopImmediatePropagation() 来阻止切换机制。然后打开你的对话框，根据用户的选择你自己切换开关：toggleReference.toggle().

无需将其设置回 true。