Angular / Mobile友好的方法是如何使用在组件类中找到的变量来修改伪元素上的属性的值？

Question

有没有比我目前正在使用的组件变量更好的方法来修改伪元素属性？ 我不是以Angular的方式这样做，但这是我的目标。 移植到移动设备时，我的方法肯定会中断。我想在组件样式表中放置一个变量：

零件：

@Input() public variable = variable;

组件样式表：

input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{
 background:linear-gradient(#568200, #568200) 0/variable 100% no-repeat #ccc
}

不幸的是，它在我的模板中不存在，因此无法在其上放置[ngClass]或[style.margin-left.px] =“ containerX-9”。目前，我正在通过设置全局CSS变量onFormChanges（）来执行此操作。

零件：

  onFormChanges(): void {
this.myForm.valueChanges.subscribe(() => {
            document.documentElement.style.setProperty('--variable', variable)
}
}

组件样式表：

background:linear-gradient(#568200, #568200) 0/var(--variable) 100% no-repeat #ccc

但这似乎是一种解决方法，很难跟踪。 Angular的方法是什么？Angular是否无法在伪元素中使用组件变量值？我想念什么？有没有更清洁的方法可以做到这一点？感谢您的任何见解或建议！

Answer 1

引用这个答案：

如果您想以编程方式处理伪元素，通常的方法是间接的：您添加/删除/更改类，并在 CSS 中使此类影响相应的伪元素。