Angular Academy · Ders

model() Sinyal Input'ları

model sinyalleriyle iki yönlü bağlamalar oluşturun.

model() Sinyal Input'ları, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

Sinyaller İki Yönlü Bağlamayla Buluşuyor

Modern Angular, elle oluşturulan girdi/çıktı çiftlerine gerek kalmadan iki yönlü bağlanabilir girdiler oluşturmak için sinyal tabanlı bir yöntem olan model() işlevini sunar.

Bir model Girdisi Tanımlama

Bir üst bileşenin iki yönlü bağlayabileceği yazılabilir bir sinyal oluşturmak için model() işlevini çağırın.

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

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

Üst Bileşenden Bağlama

Üst bileşen, model adına karşı kutu içindeki muz söz dizimini, tıpkı ngModel gibi kullanır.

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

Bir model Değerini Okuma

Model bir sinyal olduğundan, onu bir işlev gibi çağırarak okuyun.

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

Bir modeli Yazma

Bir modeli set veya update ile güncelleyin. Değişiklik otomatik olarak üst bileşene geri aktarılır.

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

Zorunlu model Girdileri

Üst bileşenin bir değer sağlaması zorunluysa model.required() kullanın.

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

export class FieldComponent {
  value = model.required<string>();
}

Şablonda model Kullanımı

Model sinyalini doğrudan bileşenin kendi şablonuna bağlayın; onu çağırmak güncel değeri verir.

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

Elle Çıktı Tanımlamak Gerekmez

model() ile ayrı bir @Output tanımlamanız gerekmez. Angular, değişiklik olayını adın sonuna Change ekleme kuralıyla sizin için bağlar.

model ve input Karşılaştırması

Sade bir input(), bileşen içinde salt okunurdur; model() ise yazılabilir ve üst bileşene geri doğru iki yönlü bağlamayı destekler.

// read-only:
label = input("");

// two-way writable:
value = model("");

model Kullanan Bir Sayaç

İşte değeri üst bileşenle eş zamanlı kalan, kendi içinde tamamlanmış bir sayaç.

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

model Ne Zaman Kullanılmalı?

Alt bileşen bir değerin sahibi olduğunda ve üst bileşenin de bu değeri okuyup güncellemesi gerektiğinde (özel form denetimleri, açma-kapama düğmeleri ve kaydırıcılar gibi) model() kullanın.

Kısa Kontrol

model sinyali girdilerini anlayıp anlamadığınızı test edin.

Özet

model() işlevi, elle oluşturulmuş bir girdi/çıktı çifti olmadan iki yönlü bağlamayı destekleyen yazılabilir bir sinyal oluşturur. Onu çağırarak okuyun, set veya update ile yazın ve üst bileşenden [(name)] ile bağlayın.

Sıkça Sorulan Sorular

“model() Sinyal Input'ları” dersi ücretsiz mi?

Evet — “model() Sinyal Input'ları” 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.

“model() Sinyal Input'ları” dersinde ne öğreneceğim?

model sinyalleriyle iki yönlü bağlamalar oluşturun. 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 3. dersidir.

“model() Sinyal Input'ları” 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