Angular Academy · Ders

Özel İki Yönlü Bağlanabilir Özellikler

Kendi iki yönlü bağlanabilir input'larınızı kullanıma açın.

Özel İki Yönlü Bağlanabilir Özellikler, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. 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.

Özel İki Yönlü Bağlama

Herhangi bir bileşen özelliğini iki yönlü bağlanabilir hâle getirebilirsiniz. Angular iki yaklaşımı destekler: klasik @Input ve @Output çifti veya modern model() sinyali.

Adlandırma Kuralı

İki yönlü bağlamanın çalışması için çıktı adı, girdi adına Change son eki eklenerek oluşturulmalıdır. Örneğin size girdisi için sizeChange çıktısı gerekir.

Girdiyi Tanımlama

Üst bileşenin ayarlayabileceği sıradan bir girdiyle başlayın.

import { Input } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
}

Eşleşen Çıktıyı Tanımlama

Change son ekiyle adlandırılmış bir @Output EventEmitter ekleyin.

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

Güncellemede Olay Yayma

Bileşen değeri kendi içinde değiştirdiğinde özelliği güncelleyin ve üst bileşenin eş zamanlı kalması için yeni değeri yayınlayın.

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

Üst Bileşenden Bağlama

Artık üst bileşen, özel özelliğiniz için kutu içindeki muz söz dizimini kullanabilir.

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

Tam Girdi/Çıktı Örneği

İşte klasik API'yi kullanan, tamamen özel ve iki yönlü bağlanabilir bir bileşen.

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

Modern model Yaklaşımı

Aynı davranış, girdi ve çıktı çiftini sizin için oluşturan model() ile çok daha kısa şekilde elde edilir.

import { model } from "@angular/core";

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

İki Yaklaşımın Karşılaştırılması

Klasik çift açıkça tanımlanır ve her yerde çalışır; model() kısa ve sinyal tabanlıdır. Her ikisi de üst bileşenlere aynı [(value)] bağlamasını sunar.

Birden Çok İki Yönlü Özellik

Bir bileşen, her biri input/inputChange kuralını izleyen birden çok iki yönlü bağlanabilir özellik sunabilir.

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

Bir Yaklaşım Seçme

Yeni kodlarda kısalık ve sinyal entegrasyonu için model() kullanmayı tercih edin. İnce denetim gerektiğinde veya sinyalleri kullanmadığınızda açık girdi/çıktı çiftini kullanın.

Kısa Kontrol

Özel iki yönlü bağlanabilir özellikleri anlayıp anlamadığınızı test edin.

Özet

Özel iki yönlü bağlama, her güncellemede değer yayınlayan bir girdi ile inputChange adlı bir çıktı gerektirir. Modern model() sinyali bu çifti otomatik olarak oluşturur ve yeni kodlar için kısa seçenektir.

Sıkça Sorulan Sorular

“Özel İki Yönlü Bağlanabilir Özellikler” dersi ücretsiz mi?

Evet — “Özel İki Yönlü Bağlanabilir Özellikler” 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.

“Özel İki Yönlü Bağlanabilir Özellikler” dersinde ne öğreneceğim?

Kendi iki yönlü bağlanabilir input'larınızı kullanıma açı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 4. dersidir.

“Özel İki Yönlü Bağlanabilir Özellikler” 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

← Angular Academy Sayfasına Dön