Angular 5中:before伪元素的动态样式设置

嘿，刚好踩过这个坑！先直接给你结论：Angular的[ngStyle]或者[style.*]是没法直接控制:before这类伪元素的——因为伪元素是CSS生成的虚拟节点，根本不在真实DOM里，Angular的属性绑定只能操作真实DOM元素的样式和属性。

不过针对你这种「登录后获取用户专属颜色、不想用ngClass或静态CSS」的场景，我有个非常适配的方案，用**CSS自定义属性（也就是CSS变量）**就能搞定，步骤超简单：

1. 在模板里把动态颜色绑定到元素的style属性，定义一个CSS变量：

   <!-- userDynamicColor是你登录后拿到的用户专属颜色，比如#2ecc71或者rgb(46,204,113) -->
   <div [style.--user-primary-color]="userDynamicColor">
     这里是带有:before伪元素的内容
   </div>
   

2. 在组件的CSS里，用这个变量来控制伪元素的样式：

   div::before {
     content: '';
     /* 先写伪元素的基础布局样式，比如宽高、定位 */
     width: 20px;
     height: 20px;
     display: inline-block;
     margin-right: 8px;
     /* 重点：用CSS变量绑定动态颜色 */
     background-color: var(--user-primary-color);
     /* 如果你需要伪元素的文字颜色，也可以用这个变量 */
     /* color: var(--user-primary-color); */
   }
   

这个方案完全符合你的需求：

• 不用写一堆对应不同颜色的ngClass类，颜色完全由后端返回的值动态控制
• 颜色值直接从组件的TS逻辑里传递，和用户登录状态完美联动
• 伪元素的基础样式还是在CSS里维护，不会把样式逻辑混在模板里

要是你需要同时控制多个动态样式，还可以一次性绑定多个CSS变量：

<div 
  [style.--user-bg-color]="userBgColor"
  [style.--user-border-color]="userBorderColor"
>
  多动态样式示例
</div>

然后在CSS里分别用var(--user-bg-color)和var(--user-border-color)就行。

内容的提问来源于stack exchange，提问作者Nemanja Grabovac