使用Angular2动态填充css Pseudo-element'之前'的内容

Question

我很难尝试动态填充:before伪元素的'content'值.我已经发现在早期版本的AngularJS上有可能在这里的另一个问题,通过在其上有before-pseudo元素的元素上创建额外的数据属性,然后attr()在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

Answer 1

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

UPDATE

你也可以name像这样放下方括号:

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

这似乎是我看到的一些例子中的惯例.我认为这是有效的,因为你已经告诉Angular通过指定来执行绑定[attr.data-before],并且假设右边的数据来自相应的组件.