動態填充CSS使用Angular2動態填充css僞元素'之前'內容

Question

我很難嘗試動態填充:before僞元素上的'content'值。 我發現這是可能在早期版本的AngularJS在另一個問題上here，通過創建具有其上的before - 僞元素的元素上的額外數據屬性，然後閱讀CSS使用attr()該值。

看來使用普通字符串的值時，工作得很好：

// CSS 
.test:before { 
    content: attr(data-before); 
} 

// Template 
<div class="test" data-before="before text goes here"> 
    <h2>Hello {{name}}</h2> 
</div> 

但是當我嘗試填補這樣的插值數據之前，我得到一個錯誤：

// CSS 
.test:before { 
    content: attr(data-before); 
} 

// Template 
<div class="test" data-before="{{name}}"> 
    <h2>Hello {{name}}</h2> 
</div> 

我在這裏錯過了什麼？所產生的錯誤是：

Error: Template parse errors: 
Can't bind to 'before' since it isn't a known property of 'div'. 

下面是plunker非工作版本：http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu

Answer 1

用途：<div class="test" [attr.data-before]="[name]">

UPDATE

您也可以只是下降的方括號name像這樣：

<div ... [attr.data-before]="name">。

這似乎是一些例子我看到的慣例。這工作，我想，因爲你已經告訴角度通過指定[attr.data-before]進行綁定，並假定右邊的數據從相應的組件來了。