用Angular2动态填充css Pseudo-element'before'内容

问题描述

我很难在伪元素之前动态地填充：内容的值。
我发现在早期版本的AngularJS上可以通过

解决方案

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

UPDATE

您也可以在 name 像这样：

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

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

I'm having a hard time trying to dynamically fill the 'content'-value on a :before pseudo-element.I've found out it was possible on earlier versions of AngularJS in another question over here, by creating an extra data attribute on the element that has the before-pseudo element on it, and then read that value using attr() in CSS.

It seems to work just fine when using a plain string as a value:

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

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

But when I try to fill the data-before with interpolation like this, I get an error:

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

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

What am I missing here? The error generated is:

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

Here's the non-working version in plunker: http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu

解决方案

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

UPDATE

You can also just drop the square brackets around name like this:

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

This appears to be the convention in a number of examples I see. This works, I think, because you are already telling Angular to perform binding by specifying the [attr.data-before], and it assumes the data on the right is coming from the corresponding component.

这篇关于用Angular2动态填充css Pseudo-element'before'内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！