使用 angular 2 动态编辑伪元素

Question

我正在尝试在 angular 2 项目中动态编辑那种 css 属性，但没有成功:(

 progress::-moz-progress-bar {
            background: #278ce2;
        }

我想在同一页面上添加 n 个进度条。背景颜色由用户选择并动态切换。我们的想法是添加一个 css 属性到像这样创建的每个栏：

 classname::-moz-progress-bar {
        background: color;
    }
 classname::-webkit-progress-value {
        background: color;
    }
 classname[aria-valuenow]:before {
        background: color;
    }

因为我想创建尽可能多的柱状图，所以我不能在之前命名类。

有没有人知道如何做到这一点？如果您需要更多详细信息，请问我。

Answer 1

找不到如何编辑那些伪元素。但我设法通过使用 div 重新创建进度条来做我想做的事。这是可以帮助某人的代码：

在HTML（有Angular 2）

<div class="probar">
  <div class="inside-probar" [ngStyle]="{background:color, width: ((value * 100)/max) + '%'}">
    {{value}}/{{max}}
  </div>
</div>

在CSS

.probar{
  height: 20px;
  width: 140px;
  border-radius: 5px;
  background: #ccc;
  padding: 3px;
}

.inside-probar{
  text-align: center;
  height: 20px;
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
  margin-left: 0px;
  color: black;
}

使用 angular 2 动态编辑伪元素

Edit dynamically pseudo-elements with angular 2

css

pseudo-element

angular