Angular2'deki bir bileşene bir dize değeri nasıl iletilir

86

Angular2'deki bir bileşene bir dize değeri iletmek istiyorum, ancak bu varsayılan bağlamayla çalışmıyor. Buna benzer bir şey düşünüyorum:

<component [inputField]="string"></component>

Ne yazık ki, ödevin sağ tarafında yalnızca ifadelere izin verilir. Bunu yapmanın bir yolu var mı?

angular angular2-template

— Andras Hatvani
kaynak

175

Dize değişmezleri farklı şekillerde aktarılabilir:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— Günter Zöchbauer
kaynak

1

Bunlar arasında bir fark var mı? Örneğin, Angular son iki durumda "bağlama" oluşturur mu yoksa yeterince akıllı mı?

— Alexander Abakumov

Angular yeterince akıllıdır. DOM'da yalnızca birincisi görünecektir.

— Günter Zöchbauer

1

Teşekkürler. İç içe alıntılar olmadan geçiyordum ve değeri NaN olarak geri <component [inputField]='string'></component>

— veriyordu

Teknik olarak, 1. ve 3. seçenekleri önermem. Bu, kelimenin tam anlamıyla, bileşen öğesindeki öznitelikleri ve değerleri ve bu değerleri kullanabilen bileşen içindeki öğeleri içerecektir. Örnekte id="example-id"istenen doğru dizge geçecektir, ancak şimdi aynı idözniteliğe sahip 2 öğe olacaktır . Bu yaklaşımı akıllıca kullanın ...

— mrtpain

50

Dizeyi tırnak içine alarak geçebilirsiniz

<component [inputField]="'string'"></component>

— Eric Martinez
kaynak

3

Dize değişmezine tek bir alıntı (ve muhtemelen diğer özel HTML karakterleri) eklemek için ilk seçenek çalışır, ancak değişmez değeri sarmak için tek tırnak kullananlar ayrıştırma hataları ile başarısız olur. Örneğin:

<component inputField="John&#39;s Value"></component>

"John Değeri" ni doğru bir şekilde verir.

— Glenn
kaynak