使用Angular2动态填充css伪元素“之前”内容答案

【问题标题】：Dynamically fill css Pseudo-element 'before' content with Angular2使用Angular2动态填充css伪元素“之前”内容
【发布时间】：2017-05-29 11:09:22
【问题描述】：

我很难在:before 伪元素上动态填充“内容”值。我发现在 here 的另一个问题中的早期版本的 AngularJS 上是可能的，方法是在具有 before-pseudo 元素的元素上创建一个额外的数据属性，然后使用 @987654325 读取该值@ 在 CSS 中。

当使用纯字符串作为值时，它似乎工作得很好：

// CSS
.test:before {
  content: attr(data-before);
}

// Template
<div class="test" data-before="before text goes here">
  <h2>Hello {{name}}</h2>
</div>

但是当我尝试用这样的插值填充数据之前，我得到一个错误：

// CSS
.test:before {
  content: attr(data-before);
}

// Template
<div class="test" data-before="{{name}}">
  <h2>Hello {{name}}</h2>
</div>

我在这里缺少什么？产生的错误是：

Error: Template parse errors:
Can't bind to 'before' since it isn't a known property of 'div'.

这是 plunker 中的非工作版本：http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu

【问题讨论】：

标签： html css angular

【解决方案1】：

使用：<div class="test" [attr.data-before]="[name]">

更新

您也可以像这样将name 周围的方括号去掉：

<div ... [attr.data-before]="name">。

这似乎是我看到的许多示例中的惯例。我认为这是可行的，因为您已经通过指定 [attr.data-before] 告诉 Angular 执行绑定，并且它假定右侧的数据来自相应的组件。

【讨论】：

为我工作。谢谢！！

【解决方案2】：

对我来说，下面这个在 Angular 8 中工作。

HTML：

<div style="display: block" class="testcl" [attr.data-before-content]="dynamicContent"></div>

CSS：

.testcl::before{
/* content: "56%"; */
content: attr(data-before-content);
position: absolute;
left: 46%;
top: 50%;
font-weight: 700;
font-size: 24px;
color: #55b358;

}

【讨论】：