input() ile Sinyal Input'ları
Reaktif input'ları sinyal olarak bildirin.
input() ile Sinyal Input'ları, 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.
Sinyal Tabanlı Girdiler
Modern Angular, bileşen girdilerini sinyal olarak tanımlamak için klasik @Input dekoratörünün yerini alan tepkisel input() işlevini sunar.
Sinyal Girdisi Tanımlama
İsteğe bağlı bir varsayılan değerle input() işlevini çağırın. Sonuç salt okunur bir sinyaldir.
import { Component, input } from "@angular/core";
@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
name = input("World");
}Girdiyi Okuma
Sinyal girdisi hem kodda hem de şablonlarda bir işlev gibi çağrılarak okunur.
@Component({
selector: "app-greet",
template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
name = input("World");
}Üst Bileşenden Bağlama
Üst bileşen, özellik bağlaması kullanarak bir sinyal girdisine klasik bir girdide olduğu gibi bağlanır.
<app-greet [name]="userName"></app-greet>
// parent
userName = "Ada";Girdiler Salt Okunurdur
Sade bir input() bileşenin içinde salt okunurdur. Üzerinde set çağıramazsınız; değerini yalnızca üst bileşen değiştirir.
// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signalsGirdileri Türlendirme
Tür güvenliği sağlamak için, özellikle varsayılan değerin türünün çıkarılamadığı durumlarda genel bir tür belirtin.
age = input<number>();
label = input<string>("Untitled");Hesaplanan Değerlerde Girdiler
Girdiler sinyal olduğundan, otomatik olarak güncellenen türetilmiş durumlar için computed ile birlikte çalışırlar.
import { input, computed } from "@angular/core";
first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());effect ile Girdiler
Bir sinyal okunduğunda yeniden çalıştırılan effect ile girdi değişikliklerine tepki verebilirsiniz.
constructor() {
effect(() => {
console.log("name is", this.name());
});
}ngOnChanges Gerekmez
Sinyal girdileriyle çoğu zaman artık ngOnChanges gerekmez; computed ve effect değişikliklere sizin yerinize tepki verir.
Girdiye Diğer Ad Verme
alias seçeneğiyle farklı bir genel bağlama adı sunabilirsiniz.
value = input(0, { alias: "count" });
<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>Sinyal Girdileri Neden Kullanılmalı
Sinyal girdileri tepkisel ve tür güvenlidir; computed ve effect ile sorunsuz biçimde birleştirilir ve dekoratör ile yaşam döngüsü yaklaşımına kıyasla gereksiz kodu azaltır.
Hızlı Kontrol
Sinyal girdileriyle ilgili anlayışınızı sınayın.
Özet
input() işlevi tepkisel, salt okunur sinyal girdileri tanımlar. Bunları çağırarak okuyun, genel türlerle türlendirin, gerektiğinde diğer ad verin ve ngOnChanges yerine computed ile effect işlevleriyle birleştirin.
Sıkça Sorulan Sorular
“input() ile Sinyal Input'ları” dersi ücretsiz mi?
Evet — “input() ile 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.
“input() ile Sinyal Input'ları” dersinde ne öğreneceğim?
Reaktif input'ları sinyal olarak bildirin. 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.
“input() ile 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
- input() ile Sinyal Input'ları
- Gerekli ve Dönüştürülmüş Input'lar
- output() ile Çıktılar
- viewChild ile Görünüm Sorguları