Bir Angular şablonunda bağlama, şablondan oluşturulan kullanıcı arayüzünün bir parçası (bir DOM öğesi, yönerge veya bileşen) ile model (şablonun ait olduğu bileşen örneği) arasında canlı bir bağlantı oluşturur. Bu bağlantı, görünümü modelle senkronize etmek, görünümde bir olay veya kullanıcı eylemi gerçekleştiğinde modeli bilgilendirmek veya her ikisi için de kullanılabilir. Angular’ın Change Detection algoritması, görünümü ve modeli senkronize tutmaktan sorumludur.
Bağlama örnekleri şunları içerir:
- text interpolations
- property binding
- event binding
- two-way binding
Bağlamaların her zaman iki bölümü vardır: bağlı değeri alacak bir hedef ve modelden bir değer üreten bir şablon ifadesi.
Sözdizimi #
Şablon ifadeleri JavaScript ifadelerine benzer. Aşağıdaki istisnalar dışında birçok JavaScript ifadesi yasal şablon ifadeleridir.
Aşağıdakiler dahil olmak üzere yan etkileri olan veya teşvik eden JavaScript ifadelerini kullanamazsınız:
- Atamalar (=, +=, -=, …)
- Operatörler new, typeof ya da instanceof
- Bağlam ifadeleri ; veya , ile.
- Arttırma ve azaltma operatörleri ++ ve —
- ES2015+ operatörlerinden bazıları
JavaScript sözdiziminden diğer önemli farklılıklar şunlardır:
- Bitişsel operatörler | ve & gibi desteklenmiyor.
İfade bağlamı #
Interpolated ifadelerin, ifadenin ait olduğu uygulamanın belirli bir parçası olan bir bağlamı vardır. Tipik olarak, bu bağlam bileşen örneğidir.
Aşağıdaki kod parçasında, recommended ifadesi ve itemImageUrl2 ifadesi AppComponent‘in özelliklerine atıfta bulunur.
<h4>{{ recommended }}</h4>
<img alt="item 2" [src]="itemImageUrl2">Bir ifade, template input variable veya template reference variable gibi şablon bağlamının özelliklerine de başvurabilir.
Aşağıdaki örnekte customer şablon giriş değişkeni kullanılmaktadır.
<ul>
@for (customer of customers; track customer) {
<li>{{ customer.name }}</li>
}
</ul>Sıradaki örnekte #customerInput adlı bir şablon referans değişkeni bulunmaktadır.
<label for="customer-input">Type something:
<input id="customer-input" #customerInput>{{ customerInput.value }}
</label>YARARLI: Şablon ifadeleri, undefined dışında global ad alanındaki hiçbir şeye başvuramaz. Window veya document başvurusu yapamazlar. Ayrıca, console.log() veya Math.max() öğelerini çağıramazlar ve ifade bağlamının üyelerine başvurmakla sınırlıdırlar.
İsim çakışmalarını önleme #
Bir ifadenin değerlendirildiği bağlam, şablon değişkenlerinin, yönergenin bağlam nesnesinin (varsa) ve bileşenin üyelerinin birleşimidir. Bu ad alanlarından birden fazlasına ait olan bir ada başvurursanız, Angular bağlamı belirlemek için aşağıdaki öncelik mantığını uygular:
- Şablon değişken adı.
- Yönerge bağlamında bir isim.
- Bileşenin üye adları.
Değişkenlerin başka bir bağlamdaki değişkenleri gölgelemesini önlemek için değişken adlarını benzersiz tutun. Aşağıdaki örnekte, AppComponent şablonu Padma adlı customer selamlanmaktadır.
Daha sonra @for, customers dizisindeki her müşteriyi listeler.
@Component({
standalone: true,
template: `
<div>
<!-- Hello, Padma -->
<h1>Hello, {{customer}}</h1>
<ul>
<!-- Ebony and Chiho in a list-->
@for (customer of customers; track customer) {
<li>{{ customer.value }}</li>
}
</ul>
</div>
`,
})
export class AppComponent {
customers = [{value: 'Ebony'}, {value: 'Chiho'}];
customer = 'Padma';
}@For içindeki customer, @for tarafından tanımlanan örtük bağlamındadır. Customers dizisindeki her müşteriye atıfta bulunur ve “Ebony” ve “Chiho“ adlarını görüntüler. “Padma” görüntülenmez çünkü bu isim bu dizide yer almaz.
Öte yandan, <h1> bileşen sınıfındaki customer özelliğinin değerine bağlı olan “Padma” ifadesini görüntüler.
En iyi ifade uygulamaları #
Bir şablon ifade kullanırken, en iyi uygulamaları izleyin:
- Kısa ifadeler kullanın
Mümkün olduğunca özellik adlarını veya yöntem çağrılarını kullanın. Uygulama ve iş mantığını bileşen içinde, geliştirme ve test için erişilebilir bir yerde tutun.
- Hızlı uygulama
Angular, her değişiklik algılama döngüsünden sonra bir şablon ifadesi yürütür. Söz çözümleri, HTTP sonuçları, zamanlayıcı olayları, tuşa basma ve fare hareketleri gibi birçok eşzamansız etkinlik, değişiklik algılama döngülerini tetikler.
Bir ifade, özellikle yavaş cihazlarda kullanıcı deneyimini mümkün olduğunca verimli tutmak için hızlı bir şekilde bitirilmelidir. Hesaplamaları daha fazla kaynak gerektirdiğinde değerleri önbelleğe almayı düşünün.
Görünür yan etki yok #
Angular’ın tek yönlü veri akışı modeline göre, bir şablon ifadesi hedef özelliğin değeri dışında herhangi bir uygulama durumunu değiştirmemelidir. Bir bileşen değerinin okunması, görüntülenen başka bir değeri değiştirmemelidir. Görünüm, tek bir render geçişi boyunca sabit olmalıdır.
Bir idempotent ifade yan etkilerden arındırılmıştır ve Angular’ın değişiklik algılama performansını artırır. Angular açısından, idempotent bir ifade, bağımlı değerlerinden biri değişene kadar her zaman tam olarak aynı şeyi döndürür.
Bağımlı değerler, olay döngüsünün tek bir dönüşü sırasında değişmemelidir. Bir idempotent ifade bir dize veya sayı döndürüyorsa, art arda iki kez çağırırsanız aynı dizeyi veya sayıyı döndürür. İfade, array de dahil olmak üzere bir nesne döndürüyorsa, art arda iki kez çağırırsanız aynı nesne başvurusunu döndürür.
