2017-01-14 16 views
6

Dinamik bir :before sözde elemanı üzerinde 'content' değer doldurmaya çalışan bir zorlanıyorum ile içerik 'önce' css Sözde eleman doldurun. here üzerinden başka bir soruda AngularJS'nin önceki sürümlerinde, before -pseudo öğesine sahip olan eleman üzerinde ek bir veri niteliği oluşturarak mümkün olduğunu öğrendim ve sonra bu değeri CSS'de attr() kullanarak okuyun.Dinamik Angular2

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

// Template 
<div class="test" data-before="{{name}}"> 
    <h2>Hello {{name}}</h2> 
</div> 
: Böyle interpolasyonlu veri önce doldurmaya çalışırken, bir hata alıyorum

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

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

Ama:

Bir değer olarak düz bir dize kullanırken sadece iyi iş gibi görünüyor

Burada nelerin eksik? oluşturulan hatadır: Burada

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

plunker olmayan çalışma sürümü: http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu

cevap

6

Kullanım: <div class="test" [attr.data-before]="[name]">

GÜNCELLEME

Ayrıca sadece etrafında kare parantez name bırakabilirsiniz böyle:

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

Bu, görmek örnekler bir dizi kongre gibi görünüyor. Bu, bence, çünkü Angular'a, [attr.data-before]'u belirterek bağlayıcılık yapması gerektiğini söylüyorsunuz ve sağdaki verilerin ilgili bileşenden geldiğini varsayar.

+1

çözüldü, çok teşekkür ederim! – Creatyfus