使 mat-slide-toggle 只读答案

【问题标题】：Make mat-slide-toggle read only使 mat-slide-toggle 只读
【发布时间】：2020-10-29 15:54:39
【问题描述】：

我在我的应用程序中使用 mat-slide-toggle 并想知道是否有办法让它只读，即禁用滑块。我不想禁用整个组件，这是我设置 disabled 属性时的结果。有没有办法做到这一点？

【问题讨论】：

禁用整个组件有什么问题？
禁用整个组件会使它变白，这不容易阅读。

【解决方案1】：

作为解决此问题的方法，您可以添加 ngModel 和 ngModelChange 输出以强制垫板保持相同的值（不是完美的解决方案，但它会起作用）

<mat-slide-toggle [(ngModel)]="myModel" (ngModelChange)="keepIt($event)">
              </mat-slide-toggle>

关于 Ts 文件

    keepIt(d){
       this.myModel=true    
    }

您可以做的另一个解决方案是从 mat-disabled 中删除不透明度，这将使它看起来像一个活动滑块，然后您可以添加 [disabled]="true"

::ng-deep .mat-slide-toggle.mat-disabled {
  opacity: 1 !important;
}

检查这个https://stackblitz.com/edit/angular-9zujdv?file=src%2Fapp%2Fslide-toggle-overview-example.html

【讨论】：

第二种解决方案更简洁，完全符合要求。非常感谢。

【解决方案2】：

你也可以创建一个指令

@Directive({
  selector: '[disableToogle]'
})
export class DisableToogleDirective {
  @Input() set disableToogle(value:boolean)
  {
        this.slide.toggleChange.closed=value
  }
  constructor(private slide:MatSlideToggle) { }
}

你用作

<mat-slide-toggle  [disableToogle]="variable">Slide me!</mat-slide-toggle>

见the stackblitz

【讨论】：