时间戳

首页 > 解决方案 > 带有固定拇指标签的 Angular Material mat-slider

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

问题描述

我想使用一个带有拇指标签的垫子滑块，它在移动时不会与滑块一起移动。我看到它的方式整个'mat-slider-thumb-container'沿着滑块移动'transform：translateX（xx％）'样式所以我猜我是否添加了相同的样式但带有-xx％到'mat-slider-thumb-label' 它应该始终位于滑块的中心吗？

<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>

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

标签： angularangular-materialangular-directiveangular-renderer2

解决方案

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

推荐阅读