Template Statements

Şablon deyimleri, kullanıcı olaylarına yanıt vermek için HTML’nizde kullanabileceğiniz yöntemler veya özelliklerdir. Şablon deyimleri ile uygulamanız, dinamik içerik görüntüleme veya form gönderme gibi eylemler aracılığıyla kullanıcılarla etkileşim kurabilir.

Aşağıdaki örnekte, deleteHero() şablon ifadesi (event)=”statement” ifadesinde olduğu gibi eşittir işareti = karakterinin sağında tırnak içinde görünür.

<button type="button" (click)="deleteHero()">Delete hero</button>

Kullanıcı Delete hero düğmesine tıkladığında, Angular bileşen sınıfındaki deleteHero() yöntemini çağırır.

Olaylara yanıt olarak öğeler, bileşenler veya yönergelerle birlikte şablon ifadelerini kullanın.

YARARLI: Olaylara yanıt vermek, Angular’ın tek yönlü veri akışının bir yönüdür. Tek bir olay döngüsü sırasında uygulamanızdaki her şeyi değiştirebilirsiniz.

Sözdizimi #

Template expressions gibi, şablon deyimler de JavaScript’e benzeyen bir dil kullanır. Ancak, şablon ifadeler için ayrıştırıcı, şablon ifadeler için ayrıştırıcıdan farklıdır. Buna ek olarak, şablon ifadeleri ayrıştırıcısı özellikle hem temel atamayı (=) hem de ifadeleri noktalı virgüllerle (;) zincirlemeyi destekler.

Aşağıdaki JavaScript ve şablon ifade sözdizimine izin verilmez:

• new
• Artırma ve azaltma operatörleri, ++ ve —
• Operatör ataması, örneğin += ve -=
• Bitişsel operatörler, örneğin | ve &
• pipe operator

Açıklama bağlamı #

İfadelerin bir bağlamı vardır – ifadenin ait olduğu uygulamanın belirli bir bölümü.

İfadeler yalnızca ifade bağlamındakilere başvurabilir; bu da genellikle bileşen örneğidir. Örneğin, deleteHero() of (click)=”deleteHero()” aşağıdaki kod parçacığındaki bileşenin bir yöntemidir.

<button type="button" (click)="deleteHero()">Delete hero</button>

Deyim bağlamı, şablonun kendi bağlamının özelliklerine de başvurabilir. Aşağıdaki örnekte, bileşenin olay işleme yöntemi onSave(), şablonun kendi $event nesnesini bir argüman olarak alır. Sonraki iki satırda, deleteHero() yöntemi bir şablon girdi değişkeni olan hero’yu alır ve onSubmit() yöntemi bir  template reference variable olan #heroForm‘u alır.

<button type="button" (click)="onSave($event)">Save</button>
...
  @for (hero of heroes; track hero) {
    <button type="button" (click)="deleteHero(hero)">{{ hero.name }}</button>
  }
...
  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

Bu örnekte, $event nesnesinin, hero‘nun ve #heroForm‘un bağlamı şablondur.

Şablon bağlam adları, bileşen bağlam adlarına göre önceliklidir. Önceki deleteHero(hero) ifadesinde hero, bileşenin hero özelliği değil şablon girdi değişkenidir.

Statement best practices #