使用Angular2动态填充CSS伪元素'before'内容

Question

我在尝试动态填充:before伪元素的“content”值时遇到了困难。 我在这里的另一个问题中发现，在早期版本的AngularJS中，通过在具有before伪元素的元素上创建额外的数据属性，然后在CSS中使用attr()读取该值是可能的。

当使用纯字符串作为值时，它似乎可以正常工作：

// 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

- Creatyfus

Answer 1

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

更新

你也可以像这样删除name周围的方括号：

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

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

- Frank Fajardo

---

对我有用。谢谢！ - Jimmy Salazar

Answer 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;

}

- sibi