Angular中如何阻止mat-slide-toggle的默认切换行为？

原来的实现无效是因为(change)事件是在组件内部状态已经完成变更后才触发的，此时调用event.preventDefault()无法回退状态。以下是两种可行的解决方案：

方案1：通过点击事件提前拦截 #

利用(click)事件在状态变更前判断条件，不满足时直接阻止事件传递，完全避免不必要的状态变更：

HTML代码 #

<mat-slide-toggle [checked]="toggleValue" (click)="onToggleClick($event)">
  切换选项
</mat-slide-toggle>

TS代码 #

import { MouseEvent } from '@angular/core';

// 组件内变量
toggleValue = false;
condition = false; // 替换为你的实际判断条件

onToggleClick(event: MouseEvent) {
  if (!this.condition) {
    // 阻止事件继续传递，避免组件触发状态变更
    event.stopPropagation();
    event.preventDefault();
  } else {
    // 条件满足时手动切换状态
    this.toggleValue = !this.toggleValue;
  }
}

方案2：在变更事件中重置状态 #

如果偏好使用(change)事件，可以在事件触发后判断条件，不满足时将绑定的状态值重置回原来的状态：

HTML代码 #

<mat-slide-toggle [checked]="toggleValue" (change)="onToggle($event)">
  切换选项
</mat-slide-toggle>

TS代码 #

import { MatSlideToggleChange } from '@angular/material/slide-toggle';

// 组件内变量
toggleValue = false;
condition = false; // 替换为你的实际判断条件

onToggle(event: MatSlideToggleChange) {
  // event.checked是组件想要切换到的新状态
  if (!this.condition) {
    // 条件不满足，重置回原来的状态
    this.toggleValue = !event.checked;
  } else {
    // 条件满足，同步状态
    this.toggleValue = event.checked;
  }
}

注意：第二种方案中，组件会短暂闪一下变更后的状态再恢复，如果需要完全避免视觉闪烁，推荐使用第一种方案。

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