使用组件类中的变量来修改伪元素上的属性值的 Angular/Mobile 友好方式是啥？

Posted 2023-03-06

【中文标题】使用组件类中的变量来修改伪元素上的属性值的 Angular/Mobile 友好方式是啥？

【英文标题】：What is the Angular/Mobile friendly way to use a variable found within the component class to modify the value of an attribute on a pseudo-element?使用组件类中的变量来修改伪元素上的属性值的 Angular/Mobile 友好方式是什么？

【发布时间】：2019-08-11 21:33:17

【问题描述】：

有没有比我现在做的更好的方法来使用组件变量修改伪元素属性？ 我不是以 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 没有办法在伪元素中使用组件变量值吗？我错过了什么？有没有更清洁的方法来做到这一点？感谢您提供任何见解或建议！

【问题讨论】：

我有点不清楚你想做什么。您只是希望覆盖组件样式表吗？在这种情况下，您只需将input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track styles 添加到您的应用样式表中。该组件被添加到您的应用程序中，然后您的 CSS 也被应用。还是我没有抓住重点？

嗨，布莱斯，感谢您的提问。该元素上的样式已被覆盖。我试图以不同于我已有的方式访问样式表。每当我的反应式表单发生变化时，我不想使用 css3 全局变量和设置该属性，而是想以某种方式直接更改该组件中的样式表。您可以使用您在模板中编写的元素来执行此操作，但由于伪元素不在您的模板中，因此它们似乎是任意禁止的。希望这能回答你的问题。添加到 OP 中当前代码的描述中。

这样我就清楚了这个问题。该组件具有使用 --variable 的 CSS。这个 get 被编译并加载到 App CSS 中，然后将变量展平为最后一个值？所以如果你改变 --variable 编译的版本不会改变。我说的对吗？您是否需要在应用程序运行期间动态更改该变量？还是只是改变一次就很好了？

这就是 css 变量的工作方式：developer.mozilla.org/en-US/docs/Web/CSS/… 如果我继续设置变量，它将更改为我设置的值。

所以我认为你这样做的方式（假设它有效）可能很好，假设变量值需要在整个生命周期中改变。也就是说，看起来您正在设置背景位置。你可以在 CSS 中重写一次而不处理注入变量吗？

【参考方案1】：

引用this答案：

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

【参考方案2】：

在模板中，根据变量使用 ngif，分配一个或另一个类，从而改变视图。