将Angular 2变量绑定到css伪类内容：attr（）表达式

Question

我想将Angular 2变量绑定[innerText] / {{}}的性能与绑定变量作为伪类的内容进行比较（因为上面的方法强制重新呈现元素）

但是，我努力尝试使用css进行角度标记。

有效

CSS：

.my-el:after {
    content: attr(my-attr);
}

HTML

<div class="my-el" my-attr="text"></div>

但在将其更改为my-attr="{{myVar}}" Angular throws error：

之后

browser_adapter.js:77 EXCEPTION: Template parse errors(...)

所以我认为我应该使用attr.my-attr="{{myVar}}"

但是在将CSS更改为

之后

.my-el:after {
    content: attr(attr.my-attr);
}

它不起作用（我猜这里的点不是有效符号吗？）。

我知道上述所有内容可能都没有多大意义，但我发现它是迄今为止我无法解决的有趣问题。

如何让这两者协同工作？提前谢谢！

Answer 1

您必须使用以下方式绑定您的值

<div class="my-el" [attr.my-attr]="myVar"></div>

这样，angular会将myVar内容附加到my-attr属性

如果您需要使用data-使用

作为前缀

<div class="my-el" [attr.data-my-attr]="myVar"></div>

然后您可以使用css访问css中的值 attr(my-attr)或attr(data-my-attr)