CSS选择器的Angular2自定义属性

Question

我正在尝试在div中设置自定义属性，以便我的CSS选择器可以找到它。但是我找不到正确的语法。

css：

 div[customAttr="dabadeedabadie"] {
    color:blue
 }

html：

<div customAttr="dabadeedabadie">I'm blue</div>

那行得通，但如果我尝试使用angular：

<div customAttr="{{'dabadeedabadie'}}">I'm blue</div>

我得到一个错误：由于它不是'div'的已知属性，因此无法绑定到'customAttr'。好吧...对，但是为什么会有问题呢？

我也尝试过：

<div attr.customAttr="'dabadeedabadie'">I'm blue</div>
<div attr.customAttr="{{'dabadeedabadie'}}">I'm blue</div>
<div [attr.customAttr]="'dabadeedabadie'">I'm blue</div>
<div [attr.data-customAttr]="'dabadeedabadie'">I'm blue</div>

这些都不会引发错误，但是也不起作用。

如何设置css选择器可识别的自定义标签属性？

Answer 1

It works both of ways

在ts中使用参数并经过硬编码

<div [attr.customAttr]="'dabadeedabadie'">I'm blue</div>
<div [attr.customAttr]="name">I'm blue with param</div>

TS

 name = 'dabadeedabadie';

CSS

 div[customAttr="dabadeedabadie"] {
    color:blue
 }