Yerleşik Kontrol Akışı

Angular şablonları, öğeleri koşullu olarak göstermenizi, gizlemenizi ve tekrarlamanızı sağlayan kontrol akışı bloklarını destekler.

@if blok koşulluları #

@if bloğu, koşul ifadesi doğru olduğunda içeriğini koşullu olarak görüntüler:

@if (a > b) {
{{a}} is greater than {{b}}
}

@if bloğu bir veya daha fazla ilişkili @else bloğuna sahip olabilir. Bir @if bloğundan hemen sonra, isteğe bağlı olarak istediğiniz sayıda @else if bloğu ve bir @else bloğu belirtebilirsiniz:

@if (a > b) {
{{a}} is greater than {{b}}
} @else if (b > a) {
{{a}} is less than {{b}}
} @else {
{{a}} is equal to {{b}}
}

Koşullu ifadenin sonucuna başvurma #

Yeni yerleşik @if koşullu, yaygın kodlama kalıpları için bir çözüm sağlamak üzere ifade sonuçlarının referanslanmasını destekler:

@if (users$ | async; as users) {
{{ users.length }}
}

@for blok – tekrarlayıcılar #

@for, bir koleksiyondaki her öğe için bir bloğun içeriğini tekrar tekrar oluşturur. Koleksiyon herhangi bir JavaScript  iterable olarak gösterilebilir, ancak normal bir Array kullanmanın performans avantajları vardır. Temel bir @for döngüsü şöyle görünür:

@for (item of items; track item.id) {
{{ item.name }}
}

iki koleksiyonun farkını hesaplamak için track #

Track ifadesinin değeri, dizi öğelerini DOM’daki görünümlerle ilişkilendirmek için kullanılan bir anahtar belirler. Öğe kimliğinin net bir şekilde belirtilmesi, Angular’ın bir koleksiyona öğeler eklendiğinde, kaldırıldığında veya taşındığında minimum DOM işlemleri kümesini yürütmesine olanak tanır.

Track‘i etkili bir şekilde kullanmak, özellikle veri koleksiyonları üzerindeki döngülerde uygulamanızın performansını önemli ölçüde artırabilir.

Değişikliğe uğramayan koleksiyonlar için (hiçbir öğe taşınmaz, eklenmez veya silinmez) track $index kullanmak verimli bir stratejidir. Değişken verilere veya sık değişikliklere sahip koleksiyonlar için, track ifadeniz olarak kullanmak üzere her bir öğeyi benzersiz şekilde tanımlayan bir özellik seçin.

Değişmez veri yapıları ile nesne kimliğini bir izleme anahtarı olarak kullandığınızda artan DOM yeniden oluşturma potansiyeline dikkat edin, çünkü bu gereksiz performans maliyetlerine yol açabilir.

@index ve diğer bağlamsal değişkenler #

@for içeriği içinde, birkaç örtük değişken her zaman kullanılabilir:

Bu değişkenler her zaman bu adlarla kullanılabilir, ancak bir @let segmenti aracılığıyla takma ad verilebilir:

@for (item of items; track item.id; let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}

Takma ad özellikle bağlamsal değişken adlarının çakışabileceği iç içe @for bloklarının kullanılması durumunda kullanışlıdır.

empty blok #

İsteğe bağlı olarak @for blok içeriğinden hemen sonra bir @empty bölümü ekleyebilirsiniz. Öğe olmadığında @empty bloğunun içeriği görüntülenir:

@for (item of items; track item.name) {
<li> {{ item.name }}</li>
} @empty {
<li> There are no items.</li>
}

@switch bloğu – seçim #

switch‘in sözdizimi if‘e çok benzer ve JavaScript switch deyiminden esinlenilmiştir:

@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}

Koşullu ifadenin değeri, === operatörü kullanılarak durum ifadesiyle karşılaştırılır.

@switch, fallthrough özelliğine sahip olmadığı için, bir break veya return ifadesine eşdeğer bir değere ihtiyacınız yok.

@Default bloğu isteğe bağlıdır ve atlanabilir. Hiçbir @case ifadeyle eşleşmiyorsa ve @default bloğu yoksa hiçbir şey gösterilmez.

Yerleşik kontrol akışı ve NgIf, NgSwitch ve NgFor yapısal yönergeleri #

@if bloğu, UI’nin koşullu kısımlarını ifade etmek için *ngIf‘in yerine geçer.

@Switch bloğu ngSwitch‘in yerini alarak büyük avantajlar sağlar:

• koşul ifadesini veya her bir koşullu şablonu tutmak için bir kapsayıcı öğe gerektirmez;
• her bir dal içinde tip daraltma dahil olmak üzere şablon tip kontrolünü destekler.

@for bloğu döngü için *ngFor‘un yerine geçer ve yapısal direktifi NgFor‘dan farklı birkaç özelliğe sahiptir.

• izleme ifadesi (nesne kimliklerine karşılık gelen anahtarların hesaplanması) zorunludur ancak daha iyi ergonomiye sahiptir (trackBy yöntemini oluşturmak yerine bir ifade yazmak yeterlidir);
• Angular’ın özelleştirilebilir diffing uygulaması (IterableDiffer) yerine, bir koleksiyondaki değişikliklere yanıt olarak gerçekleştirilecek minimum sayıda DOM işlemini hesaplamak için yeni bir optimize edilmiş algoritma kullanır;
• @empty bloklar için desteğe sahiptir.

Track ayarı, NgFor‘un trackBy fonksiyonu kavramının yerini alır. Çünkü @for yerleşiktir, trackBy işlevini geçirmekten daha iyi bir deneyim sağlayabilir ve bunun yerine doğrudan anahtarı temsil eden bir ifade kullanabiliriz. trackBy fonksiyonunu çağırarak trackBy‘den track‘e geçiş yapmak mümkündür:

@for (item of items; track itemId($index, item)) {
{{ item.name }}
}