css - 将 Angular 2 变量绑定(bind)到 css 伪类内容 : attr() expression

Question

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

但是，我很难尝试使 Angular 标记与 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);
}

它不起作用(我猜 dot 在这里不是有效符号？)。

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

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

Answer 1

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

<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)