Angular中如何实现带三种状态的mat-slide-toggle组件？

原生的mat-slide-toggle不支持直接实现三态切换，它默认仅提供开（checked）、关（unchecked）两种状态。不过你可以通过自定义逻辑和样式来实现需求中的三态效果，具体思路如下：

• 自定义状态管理：在组件内部维护一个包含三种状态的变量（比如'off' | 'partial' | 'on'），绑定mat-slide-toggle的点击事件，每次触发时按顺序切换状态。
• 样式定制：覆盖mat-slide-toggle的默认CSS样式，根据当前状态调整滑块位置、背景色等视觉元素，匹配你需要的效果。
• 表单集成（可选）：如果需要在表单中使用，可将该组件封装为实现ControlValueAccessor的自定义表单控件，支持ngModel或响应式表单绑定。

简单实现示例 #

组件类逻辑

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

@Component({
  selector: 'app-tri-state-toggle',
  templateUrl: './tri-state-toggle.component.html',
  styleUrls: ['./tri-state-toggle.component.scss']
})
export class TriStateToggleComponent {
  currentState: 'off' | 'partial' | 'on' = 'off';

  toggleState(event: Event) {
    // 阻止默认的双态切换逻辑
    event.stopPropagation();
    switch(this.currentState) {
      case 'off':
        this.currentState = 'partial';
        break;
      case 'partial':
        this.currentState = 'on';
        break;
      case 'on':
        this.currentState = 'off';
        break;
    }
  }
}

模板代码

<mat-slide-toggle 
  [checked]="currentState !== 'off'"
  [class.partial-state]="currentState === 'partial'"
  (click)="toggleState($event)"
>
  三态切换按钮
</mat-slide-toggle>

自定义样式（SCSS）

.mat-slide-toggle.partial-state {
  .mat-slide-toggle-bar {
    background-color: #ffc933; /* 中间状态的背景色 */
  }

  .mat-slide-toggle-thumb {
    left: 50%; /* 滑块居中，对应中间状态 */
    transform: translateX(-50%);
    background-color: #ffc933;
  }
}

注意：如果你的三态需要和业务数据强绑定，建议进一步封装成可复用的表单控件，确保状态同步的准确性。

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