带有固定拇指标签的 Angular Material mat-slider答案

【问题标题】：Angular Material mat-slider with fixed thumblabel带有固定拇指标签的 Angular Material mat-slider
【发布时间】：2021-04-23 21:14:06
【问题描述】：

我想使用一个带有拇指标签的垫子滑块，它在移动时不会随滑块一起移动。我看到它的方式是整个 'mat-slider-thumb-container' 以 'transform:translateX(xx%)' 样式沿着滑块移动所以我猜想如果我在“mat-slider-thumb-label”中添加一个相同的样式但使用 -xx% 它应该总是在滑块的中心？

<div class="mat-slider-thumb-container" style="transform: translateX(-100%);" ng-reflect-ng-style="[object Object]"><div class="mat-slider-focus-ring"></div><div class="mat-slider-thumb"></div><div class="mat-slider-thumb-label"><span class="mat-slider-thumb-label-text">0</span></div></div>

现在，首先，角度如何获得 xx%，我如何获得这个值？一种解决方法是只计算带有实际值的百分比和滑块的最小值/最大值，但 angular 必须将此百分比存储在某个变量中，所以在我看来，使用同一个变量会更加优雅角度必须使用。

我尝试使用指令将 'transform:translateX(xx%)' 的样式添加到具有 'mat-slider-thumb-label' 类的元素中，但它似乎忽略了它。当我添加其他样式时，它工作得非常好，例如：背景颜色或宽度，但变换似乎完全被忽略了，我真的不明白为什么。

export class FixThumbLabelDirective implements OnChanges {
    constructor(private renderer: Renderer2, private elRef: ElementRef) {}
    @Input() thumbLabelPos: number;

    ngOnChanges() {
        this.renderer.setStyle(
            this.elRef.nativeElement.children[0].children[2].children[2],
            'transform',
            'translateX(' + this.thumbLabelPos * 10 + 'px)'//this obviously needs a properly calculated % value , just put it that way to make changes definitely noticeable
        );
        console.log(this.thumbLabelPos);
    }
}

我还尝试了其他转换值，例如 px 而不是 % 或旋转元素，但似乎没有任何效果。

我的html：

<mat-slider appFixThumbLabel [thumbLabelPos]='value' [(ngModel)]="value" 
  value="value" thumbLabel >
</mat-slider>

这是我在这里实际发布的第一个问题，我希望我能足够清楚地表达我的问题，欢迎所有找到解决方案的建议

【问题讨论】：

标签： angular angular-material angular-directive angular-renderer2

【解决方案1】：

好的。我想我找到了我的问题的问题。在我的 css 中的某个地方，在 mat-slider-thumb-label 类上有另一个带有 !important 的变换...

【讨论】：