Özellik ve Olay Bağlama Özeti
Verileri bileşenlere bağlayın ve olayları bileşenlerden dışarı aktarın.
Özellik ve Olay Bağlama Özeti, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Veri Akışının İki Yönü
Angular şablonları veriyi iki yönde taşır: özellik bağlama verileri DOM'a aktarır, olay bağlama ise kullanıcı eylemlerini bileşene geri gönderir.
Enterpolasyon
Çift süslü parantezlerle yapılan enterpolasyon, bir bileşen değerini metin olarak görüntüler. Bu, bileşenden görünüme doğru tek yönlü bir akıştır.
<p>{{ title }}</p>
// component
title = "Dashboard";Özellik Bağlama Söz Dizimi
Köşeli parantezler, bir bileşen değerini öğe veya bileşen özelliğine bağlar. Sağdaki ifade değerlendirilir ve atanır.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";Bileşen Girdilerine Bağlama
Özellik bağlama, değerleri alt bileşenin @Input özelliklerine de aktarır.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";Öznitelik ve Özellik Karşılaştırması
Özellik bağlama, HTML özniteliklerini değil, DOM özelliklerini hedefler. Yalnızca öznitelikler için attr. ön ekini kullanın.
<button [attr.aria-label]="label">Save</button>Olay Bağlama Söz Dizimi
Parantezler, bir DOM olayını bileşen yöntemine bağlar. Yöntem, olay tetiklendiğinde çalışır.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }$event Nesnesi
Özel $event değişkeni, olay yükünü işleyicinize taşır.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}Bileşen Çıktılarına Bağlama
Olay bağlama, bir EventEmitter aracılığıyla yayılan alt bileşen @Output olaylarını da dinler.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }Her İki Bağlamayı Birleştirme
Aynı özellikte özellik bağlama ile olay bağlamayı birlikte kullanmak, sırada göreceğiniz iki yönlü bağlamanın temelidir.
<input [value]="name" (input)="name = $event.target.value">Sınıf ve Stil Bağlamaları
Özel özellik bağlamaları, bileşen durumuna göre sınıfları ve stilleri etkinleştirip devre dışı bırakır.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>Şablonları Bildirimsel Tutma
Bağlamalar, veri ile görünüm arasındaki ilişkiyi bildirimsel tutar. Bağlı değerler değiştiğinde Angular DOM'u otomatik olarak günceller.
Kısa Kontrol
Özellik ve olay bağlamayı anlayıp anlamadığınızı test edin.
Özet
Özellik bağlama [prop] verileri görünüme aktarır, olay bağlama (event) eylemleri geri gönderir ve enterpolasyon metni görüntüler. Aynı değer üzerinde özellik ve olay bağlamayı birleştirmek iki yönlü bağlamayı oluşturur.
Sıkça Sorulan Sorular
“Özellik ve Olay Bağlama Özeti” dersi ücretsiz mi?
Evet — “Özellik ve Olay Bağlama Özeti” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Özellik ve Olay Bağlama Özeti” dersinde ne öğreneceğim?
Verileri bileşenlere bağlayın ve olayları bileşenlerden dışarı aktarın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Özellik ve Olay Bağlama Özeti” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Özellik ve Olay Bağlama Özeti
- ngModel ile İki Yönlü Bağlama
- model() Sinyal Input'ları
- Özel İki Yönlü Bağlanabilir Özellikler