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

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

然而，我很难尝试使角度标记与 css 一起工作。

这样可行

CSS:

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

HTML

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

但改成之后my-attr="{{myVar}}"角度抛出错误：

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

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

但是将 CSS 更改为

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

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

我知道以上所有内容可能没有多大意义，但是我发现这是一个有趣的问题，到目前为止我无法解决。

有什么想法如何让这两者一起工作吗？提前致谢！

您必须通过以下方式绑定您的值

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

这样 Angular 将附加myVar内容到my-attr属性

如果你需要在前面加上data- use

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

然后你可以使用 css 访问该值attr(my-attr) or attr(data-my-attr)