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

【问题标题】：Bind Angular 2 variable to css pseudo-class content: attr() expression将 Angular 2 变量绑定到 css 伪类内容：attr() 表达式
【发布时间】：2016-09-16 03:15:55
【问题描述】：

我想比较渲染 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 后会抛出错误：

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

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

但是在把 CSS 改成

之后

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

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

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

任何想法如何使这两者一起工作？提前致谢！

【问题讨论】：

标签： css angularjs angular

【解决方案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 访问值 attr(my-attr) 或 attr(data-my-attr)

【讨论】：