0

スライダーを動かしても一緒に動かないサムラベル付きのマットスライダーを使用したいと思います。私が見る方法では、「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>

まず、Angular はどのように xx% を取得し、どのようにこの値を取得できますか? 回避策は、スライダーの実際の値と最小/最大値でパーセンテージを計算することですが、角度はこのパーセンテージをいくつかの変数に保存する必要があるため、同じ変数を使用する方がはるかにエレガントであるかのように感じますangular を使用する必要があります。

「mat-slider-thumb-label」クラスの要素に「tranform:translateX(xx%)」のスタイルを追加するディレクティブを使用しようとしましたが、無視されているようです。background-color や width などの他のスタイルを追加すると、まったく問題なく動作しますが、変換は完全に無視されているようで、その理由がよくわかりません。

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>

これは私が実際にここに投稿する最初の質問です。問題を十分に明確に表現できれば幸いです。解決策を見つけるためのすべての提案を歓迎します

4

1 に答える 1

0

大丈夫。私の問題を見つけたと思います。CSS のどこかに、mat-slider-thumb-label クラスで !important を使用した別の変換がありました...

于 2021-01-19T16:05:28.980 に答える