Angular’da özellik bağlama, HTML öğelerinin veya yönergelerinin özellikleri için değerler ayarlamanıza yardımcı olur. Düğme özelliklerini değiştirme, yolları programlı olarak ayarlama ve bileşenler arasında değerleri paylaşma gibi işlemleri yapmak için özellik bağlamayı kullanın.
Veri akışının anlaşılması #
Özellik bağlama, bir değeri bir yönde, bir bileşenin özelliğinden bir hedef öğe özelliğine taşır.
Bir hedef öğe özelliğini okumak veya yöntemlerinden birini çağırmak için ViewChild ve ContentChild için API referansına bakın.
Bir özelliğe bağlama #
YARARLI: Olayları dinleme hakkında bilgi için Event binding bölümüne bakın.
Bir öğenin özelliğine bağlanmak için, özelliği hedef özellik olarak tanımlayan köşeli parantez [] içine alın.
Hedef özellik, bir değer atamak istediğiniz DOM özelliğidir.
Bir bileşenin özelliğine (ItemDetailComponent‘in childItem‘ı gibi) bir dize atamak için aynı ayraçlı atama gösterimini kullanırsınız:
<img alt="item" [src]="itemImageUrl">
Çoğu durumda, hedef ad bir niteliğin adı gibi görünse bile bir özelliğin adıdır.
Bu örnekte src, <img> öğesi özelliğinin adıdır.
Parantezler, [], Angular’ın atamanın sağ tarafını dinamik bir ifade olarak değerlendirmesine neden olur.
Köşeli parantez olmadan, Angular sağ taraftaki değeri bir dize değişkeni olarak işler ve özelliği o statik değere ayarlar.
Bir özelliğe dize atamak için aşağıdaki kodu yazın:
<app-item-detail childItem="parentItem"></app-item-detail>
Parantezlerin çıkarılması parentItem değerini değil parentItem dizesini oluşturur.
Bir öğe özelliğini bir bileşen özelliği değerine ayarlama #
Bir <img> öğesinin src özelliğini bir bileşenin özelliğine bağlamak için, src‘yi köşeli parantez içine alın ve ardından bir eşittir işareti ve ardından özelliği yerleştirin.
itemImageUrl özelliğini kullanarak aşağıdaki kodu yazın:
<img alt="item" [src]="itemImageUrl">
Bu durumda AppComponent olan sınıfta itemImageUrl özelliğini beyan edin.
itemImageUrl = '../assets/phone.svg';
colspan ve colSpan #
Yaygın bir karışıklık noktası, colspan niteliği ile colSpan özelliği arasındadır. Bu iki adın yalnızca tek bir harfle farklı olduğuna dikkat edin.
colSpan kullanarak özellik bağlamayı kullanmak için aşağıdakileri yazın:
<!-- Notice the colSpan property is camel case -->
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
Bileşenin isUnchanged özelliği true iken bir düğmeyi devre dışı bırakmak için aşağıdakileri yazın:
<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
Bir yönergenin bir özelliğini ayarlamak için aşağıdakileri yazın:
<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
Üst ve alt bileşenlerin birbirleriyle iletişim kurması için özel bir bileşenin model özelliğini ayarlamak üzere aşağıdakileri yazın:
<app-item-detail [childItem]="parentItem"></app-item-detail>
Geçiş düğmesi özellikleri #
Bir düğmenin özelliklerini devre dışı bırakmak için Boolean değeri kullanmak üzere, disabled DOM niteliğini sınıftaki bir Boolean özelliğine bağlayın.
<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
AppComponent‘te isUnchanged özelliğinin değeri true olduğu için Angular düğmeyi devre dışı bırakır.
isUnchanged = true;