如何实现点击确认弹窗确定才切换slide-toggle，取消则保持状态

这个问题的核心原因是：你绑定的(click)事件触发时，Mat Slide Toggle组件已经默认完成了状态切换操作，所以不管你点击弹窗的确定还是取消，开关状态都会改变。我们需要先阻止这个默认行为，再根据用户的选择手动控制状态。

解决方案步骤： #

• 在点击事件中传递$event对象，用于阻止默认行为
• 调用event.preventDefault()阻止组件的默认状态切换
• 根据confirm的返回结果，决定是否手动切换checked状态

修改后的代码： #

HTML部分：

<mat-card class="result"> 
  <mat-card-content> 
    <h2 class="example-h2">Result</h2> 
    <section class="example-section"> 
      <mat-slide-toggle 
        class="example-margin" 
        [color]="color" 
        [checked]="checked" 
        [disabled]="disabled" 
        (click)="myfunction($event)">
        Slide me! 
      </mat-slide-toggle> 
    </section> 
  </mat-card-content> 
</mat-card>

TypeScript部分：

export class SlideToggleConfigurableExample { 
  color = 'accent'; 
  checked = false; 
  disabled = false; 

  myfunction(event: Event) {
    // 阻止slide-toggle的默认状态切换行为
    event.preventDefault();
    
    if (confirm('Are you sure to change Status?')) {
      // 用户确认，手动切换状态
      this.checked = !this.checked;
    }
    // 用户取消时，不做任何操作，保持原有状态
  } 
}

这样修改后，只有当用户点击弹窗的确定按钮时，开关状态才会切换；点击取消时，状态会保持不变，完全符合你的需求。

内容的提问来源于stack exchange，提问作者user9699663