1

有一种方法可以通过@HostBinding 或Angular2中的其他方式动态改变伪元素的样式？

我为范围输入编写了一个指令，我想根据值更改滑块颜色。

export class AwesomeRangeDirective implements OnInit {

    @Input() firstColor: string;

    @Input() lastColor: string;

    colorPalette: string[] = [];

    @HostBinding('style.background')
    color: string = '#FFFFFF';

    ngOnInit(): void {
        this.calculateColorPalette(20);
    }

    private calculateColorPalette(volume: number) {
        const firstRGB = this.hexToRgb(this.firstColor);
        const lastRGB = this.hexToRgb(this.lastColor);
        let percent: number;
        let color: RGBColor;
        for (let iterator = 0; iterator < volume; iterator++) {
            percent = iterator / volume;
            color = this.calculateColor(firstRGB, lastRGB, percent);
            this.colorPalette.push(this.rgbToHex(color));
        }
    }
}

对于#FFFFFF 和#000000 颜色，我得到了正确的颜色数组。

[“#ffffff”、“#f2f2f2”、“#e5e5e5”、“#d8d8d8”、“#cccccc”、“#bfbfbf”、“#b2b2b2”、“#a5a5a5”、“#999999”、“#8c8c8c” 、“#7f7f7f”、“#727272”、“#666666”、“#595959”、“#4c4c4c”、“#3f3f3f”、“#333333”、“#262626”、“#191919”、“#0c0c0c” ]

我可以使用@HostBinding动态更改输入的背景颜色，但我完全不知道如何更改 psudoelement 的颜色：

input[type=range]::-webkit-slider-thumb {
  background: #000000;
}

有可能吗？如何在不为滑块创建单独组件的情况下做到这一点？

4

0 回答 0