Question

有一种方法可以通过@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颜色，我得到了正确的颜色数组。

[＆＃34; #ffffff＆＃34;，＆＃34;＃f2f2f2＆＃34;，＆＃34;＃e5e5e5＆＃34;，＆＃34;＃d8d8d8＆＃34;，＆＃34; #cccccc＆＃34;，＆＃34;＃bfbfbf＆＃34;，＆＃34;＃b2b2b2＆＃34;，＆＃34;＃a5a5a5＆＃34;，＆＃34;＃999999＆＃34;，＆＃34;＃8c8c8c＆＃34;，＆＃34;＃7f7f7f＆＃34;，＆＃34;＃727272＆＃34 ;, ＆＃34;＃666666＆＃34;，＆＃34;＃595959＆＃34;，＆＃34;＃4c4c4c＆＃34;，＆＃34;＃3f3f3f＆＃34;，＆＃34;＃333333＆＃34;，＆＃34;＃262626＆＃34 ;, ＆＃34;＃191919＆＃34;，＆＃34;＃0c0c0c＆＃34;]

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

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

有可能吗？如何在不为滑块创建单独组件的情况下执行此操作？

Angular2指令中伪元素样式的动态变化

0 个答案: