動的にCSSの前に擬似要素のAngular2のコンテンツを入力してください

Question

:before疑似要素のcontent-valueを動的に入力しようとしています。 AngularJSの以前のバージョンでは、別の質問でhereを超えて、before-pseudo要素を持つ要素に余分なデータ属性を作成し、その値を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]を指定してAngularにバインドを実行するように指示しているため、右のデータが対応するコンポーネントから来ていると仮定しているため、これはうまくいくと思います。