Angular 帶固定拇指標簽的材料墊滑塊

Question

我想使用帶有拇指標簽的墊子滑塊，它在移動時不會與 slider 一起移動。 我看到它的方式整個'mat-slider-thumb-container'沿着slider以'transform：translateX（xx％）'風格移動所以我猜我是否添加了相同的風格但使用-xx％ 'mat-slider-thumb-label' 它應該始終位於 slider 的中心？

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

現在，首先，angular 是如何獲得 xx% 的，我怎樣才能獲得這個值？ 一種解決方法是僅使用 slider 的實際值和最小/最大值計算百分比，但 angular 必須將此百分比存儲在某個變量中，所以在我看來，使用同一個變量會更加優雅angular 必須使用。

我嘗試使用指令將 'transform:translateX(xx%)' 的樣式添加到具有 'mat-slider-thumb-label' class 的元素中，但它似乎忽略了它。 它工作得很好，當我添加其他 styles 例如：背景顏色或寬度但變換似乎完全被忽略了，我真的不明白為什么。

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>

這是我在這里實際發布的第一個問題，我希望我足夠清楚地表達了我的問題，歡迎所有找到解決方案的建議

Answer 1

好吧。 我想我找到了我的問題的問題。 在我的 css 的某個地方，mat-slider-thumb-label class 上有另一個帶有.important 的變換...