禁用 mat-slider 上的交互并保持 CSS 样式答案

【问题标题】：Disable interactions on mat-slider and keeping css styles禁用 mat-slider 上的交互并保持 CSS 样式
【发布时间】：2020-03-08 03:00:32
【问题描述】：

我正在尝试制作一个始终在屏幕上带有拇指标签的只读垫滑块。

我有我的垫子滑块组件

<mat-slider
    class="example-margin"
    [disabled]="false"
    [thumbLabel]="true"
    [tickInterval]="tickInterval"
    [(ngModel)]='value'
    >
</mat-slider>

为了让拇指标签始终可见，我使用了这些 css 属性

::ng-deep .mat-slider-thumb-label {
  transform: rotate(45deg) !important;
  border-radius: 50% 50% 0 !important;
}

::ng-deep .mat-slider-thumb {
  transform: scale(0) !important;
}

::ng-deep .mat-slider-thumb-label-text {
  opacity: 1 !important;

}

为了停止与mat-slider 的交互，我使用了disabled=true，但是当我这样做时，样式消失并且拇指标签也消失了，然后我在栏中得到一个空白空间

这是我想要的，但禁用了交互

这里是Demo

【问题讨论】：

标签： javascript html css angular angular-material2

【解决方案1】：

这可以通过禁止控件上的指针事件来实现。我修改了一些 CSS 和指针事件也被禁用。

CSS

::ng-deep .mat-slider-thumb-label {
   transform: rotate(45deg) !important;
   background-color: #ffd740 !important;  <-- make color important so it will not change or disappear in any condition
   border-radius: 50% 50% 0 !important;
}

添加内联样式

style="pointer-events: none;"

Stackbliz 网址：https://stackblitz.com/edit/angular-fkzv3z

【讨论】：

【解决方案2】：

禁用它不会按预期工作。一种解决方案是覆盖禁用的类样式，这将是很多而不是最佳解决方案。

我建议只禁用指针事件。

例如

.example-margin {
  pointer-events: none;
}

这将不允许指针交互，您的用例已解决:)

【讨论】：

【解决方案3】：

分享一个在 Angular 8 中工作的解决方案，而无需使用 ::ng-deep（请参阅下面的注释）

在您的垫子滑块中指定以下内容

类：“cdk-focused”
style:"pointer-events:none"

示例 HTML 代码片段

            <mat-slider class="cdk-focused" style="pointer-events:none;" min="0" max="100" thumbLabel="true"
                disabled="false" [value]="item.percent" [displayWith]="formatPercentage">
            </mat-slider>

注意：ng-deep is deprecated

【讨论】：