使用角度 2 动态编辑伪元素答案

【问题标题】：Edit dynamically pseudo-elements with angular 2使用角度 2 动态编辑伪元素
【发布时间】：2017-03-23 16:12:48
【问题描述】：

我正在尝试在 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;
    }

由于我希望能够根据用户的需要创建尽可能多的条，因此我无法为之前的类命名。

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

【问题讨论】：

标签： css angular pseudo-element

【解决方案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;
}

【讨论】：