禁用点击愤怒线上的值更改 Angular Material
disable value change on click rage line Angular Material
是否可以在触发时禁用范围线上的点击事件？
我找不到任何解决方案。
我假设您想在滑块滑块上保留点击事件？
基本上，您将一些自定义 class 应用到您的滑块（例如 noclick），移除整个滑块上的 pointer-events，并在缩略图上移除它们 re-add只有.
请注意，class 样式放置在全局 styles.css 中 - 这是因为您无法从您的组件“穿透”组件外部到 angular classes（除非你禁用封装，我建议不要这样做）。
代码本身以防 stackblitz 失败：
.noclick {
pointer-events: none;
}
.noclick .mat-slider-wrapper .mat-slider-thumb-container {
pointer-events: all;
}
解决方案并不完美，因为单击滑块轨道不会聚焦组件。我认为您可以尝试解决它 - 例如使用 @ViewChild 获取滑块的实例，访问滑块的私有属性以拦截点击事件，检查它是否起源于轨道或拇指，将其加入可观察到的变化并使用它而不是原始的变化事件。但这对我的品味来说似乎太老套了，老实说，我个人会创建具有所需行为的自定义滑块组件。
是否可以在触发时禁用范围线上的点击事件？ 我找不到任何解决方案。
我假设您想在滑块滑块上保留点击事件？
基本上，您将一些自定义 class 应用到您的滑块（例如 noclick），移除整个滑块上的 pointer-events，并在缩略图上移除它们 re-add只有.
请注意，class 样式放置在全局 styles.css 中 - 这是因为您无法从您的组件“穿透”组件外部到 angular classes（除非你禁用封装，我建议不要这样做）。
代码本身以防 stackblitz 失败：
.noclick {
pointer-events: none;
}
.noclick .mat-slider-wrapper .mat-slider-thumb-container {
pointer-events: all;
}
解决方案并不完美，因为单击滑块轨道不会聚焦组件。我认为您可以尝试解决它 - 例如使用 @ViewChild 获取滑块的实例，访问滑块的私有属性以拦截点击事件，检查它是否起源于轨道或拇指，将其加入可观察到的变化并使用它而不是原始的变化事件。但这对我的品味来说似乎太老套了，老实说，我个人会创建具有所需行为的自定义滑块组件。