Angular中如何动态控制.cylinder::after的CSS背景色？

伪元素（如::after）不属于DOM节点，Angular的ngStyle、ngClass无法直接作用于它们，以下是两种可行的实现方式：

方法1：CSS变量 + Angular属性绑定 #

这是最简洁的实现思路：

1. 修改你的Sass代码，用CSS变量定义伪元素的背景色：

.cylinder::after {
  content: '';
  display: inline-block;
  width: 75px;
  height: 11.5px;
  background: var(--cylinder-bg, blue); /* 蓝色为默认值 */
  border: 1px solid #000000;
  border-radius: 50%;
  position: absolute;
  left: -1px;
  bottom: -7.5px;
  z-index: 0;
}

2. 在组件模板中，给.cylinder元素动态绑定CSS变量：

<div class="cylinder" [style.--cylinder-bg]="targetValue < 0 ? 'red' : 'blue'">
  <!-- 组件内容 -->
</div>

这里的targetValue是你组件中用来判断正负的数值变量，当它小于0时，CSS变量会被设为红色，否则保持蓝色。

方法2：动态切换类名 #

如果需要同时调整多个样式，推荐用类切换的方式：

1. 在Sass中扩展样式类，覆盖伪元素的背景色：

.cylinder::after {
  content: '';
  display: inline-block;
  width: 75px;
  height: 11.5px;
  background: blue;
  border: 1px solid #000000;
  border-radius: 50%;
  position: absolute;
  left: -1px;
  bottom: -7.5px;
  z-index: 0;
}

.cylinder.negative-state::after {
  background: red;
}

2. 在模板中用ngClass动态添加/移除类：

<div class="cylinder" [ngClass]="{ 'negative-state': targetValue < 0 }">
  <!-- 组件内容 -->
</div>

当targetValue为负数时，.negative-state类会被自动添加，伪元素的背景色随之变为红色。

关于[ngStyle.cylinder::after]无效的原因 #

ngStyle是作用于DOM元素本身的指令，而::after是CSS生成的虚拟元素，并不存在于DOM树中，因此Angular无法通过指令直接定位到伪元素进行样式绑定，这就是你之前写法不生效的核心原因。

内容的提问来源于stack exchange，提问作者Pritam Sarkar