在不使用禁用的情况下保持材料幻灯片切换打开或关闭[重复]

【问题标题】：Keep Material Slide Toggle pegged on or off without using disabled [duplicate]在不使用禁用的情况下保持材料幻灯片切换打开或关闭[重复]
【发布时间】：2018-12-02 02:33:33
【问题描述】：

我的 Angular 4 应用程序要求 mat-slide-toggle 保持打开（彩色）或在某些情况下保持关闭。通常禁用标签将用于这种情况，在这种情况下，最好将切换保持在相同状态并抛出一个提醒用户的快餐栏。

我的方法只是传入更改事件并在调用函数后将按钮切换回其预单击状态。但是，它似乎只适用于第一次点击，然后用户似乎可以随意切换。有没有更好的方法来实现这一点？

编辑：我正在做的一个例子是https://stackblitz.com/edit/angular-bspml8-qtafs2

【问题讨论】：

标签： javascript angular angular-material slide

【解决方案1】：

您需要阻止点击事件到达 MatSlideToggle 的点击处理程序。您可以通过添加自己的点击处理程序并在事件上调用 preventDefault() 来做到这一点：

<mat-slide-toggle (click)="$event.preventDefault()" ...>...</mat-slide-toggle>

【讨论】：

但是按键空格键可以改变切换值。如果 keyCode == spacebar (32)，我在事件 keypress 中调用 preventDefault。它似乎不起作用。
我认为是因为 css 的类名。即使我调用 $event.preventDefault()，mat-slide-toggled 也删除了 mat-checked 类名。这就是为什么我可以切换组件
使用keydown 而不是keypress。
keypress也是一样的，你可以用问题的链接试试。即使已经调用了 preventDefault()，您也可以使用键空格键在不通知的情况下打开
我用问题中的链接进行了尝试 - 与 keydown 一起工作正常。