Question

当我检查幻灯片切换开关时，它应该可以正常工作。但是，当我尝试取消选中它时，会出现一个确认窗口，询问您是否确定。当我在该确认窗口中单击“取消”时，切换仍变为未选中状态，这是不应该发生的。它应该保持相同的状态。

这是我的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")
           }
        }
    }

当尝试取消选中切换按钮的确认窗口出现时，我单击取消选项，则切换没有任何反应。 stopPropagation（）也不起作用。

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

Answer 1

不幸的是，您无法将stopPropagation与mat-slide-toggle一起使用，在其他情况下，需要以编程方式将事件的检查值设置回true。

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 2

您可以通过侦听click事件然后侦听event.preventDefault（）/ event.stopImmediatePropagation（）来防止切换机制。然后打开对话框，并根据用户选择来切换是否切换：toggleReference.toggle（）。

无需将其设置为true。

Answer 3

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

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

这是因为change值更改后之后触发了mat-slide-toggle事件。

为了解决此问题，我们必须在true事件触发后立即将其值重置为其先前的（change），然后让用户决定是否确认该操作，我们将相应地更新该值。

代码为：

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

我认为问题是（change）=“ eventHandler（）”将在值更改后触发，而（ngModelChange）=“ eventHandler（）”将在值更改前触发

当我在确认窗口中单击“取消”时，mat-slide-toggle不应更改其状态

4 个答案: