Angular Academy · Ders

Gerekli ve Dönüştürülmüş Input'lar

Input'ları gerekli olarak işaretleyin ve değerleri dönüştürün.

Gerekli ve Dönüştürülmüş Input'lar, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Temel Girdilerin Ötesinde

Sinyal girdileri iki güçlü özelliği destekler: bir girdiyi required olarak işaretlemek ve gelen değerleri depolanmadan önce dönüştürmek.

Zorunlu Girdiler

Üst bileşenin her zaman bir değer sağlaması gerektiğinde input.required() kullanın. Varsayılan değer yoktur.

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

export class UserComponent {
  userId = input.required<string>();
}

Zorunluluk Neden Önemlidir

Zorunlu bir girdi bağlanmazsa Angular bir hata bildirir. Böylece tanımsız bir değerin fark edilmeden ilerlemesine izin vermek yerine hatalar erkenden yakalanır.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Zorunlu Girdiler Null Olamaz

Zorunlu bir girdi sağlanmak zorunda olduğundan türü hiçbir zaman tanımsız olmaz; bu nedenle null denetimleri yapmadan güvenle okuyabilirsiniz.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Girdileri Dönüştürme

transform seçeneği, gelen değer depolanmadan önce üzerinde bir işlev çalıştırır; bu, tür dönüştürme için kullanışlıdır.

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

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Boolean Dönüştürme

Angular, öznitelik tarzındaki değerleri gerçek boole değerlerine dönüştürmek için booleanAttribute özelliğini sunar; bu, varlık tarzı öznitelikler için kullanışlıdır.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Sayı Dönüştürme

Benzer şekilde numberAttribute, dize biçimindeki bir özniteliği sayıya dönüştürür.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Özel Dönüştürme İşlevleri

Dizeleri trim ile kırpmak gibi değerleri normalleştirmek için istediğiniz dönüştürmeyi yazabilirsiniz.

label = input("", {
  transform: (v: string) => v.trim()
});

Girdi ve Çıktı Türlerini Dönüştürme

Bir dönüştürme bir türü kabul edip başka bir türü depolayabilir. Kabul edilen tür, üst bileşenlerin bağladığı türdür; depolanan tür ise okuduğunuz türdür.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Zorunluluk ve Dönüştürmeyi Birlikte Kullanma

Seçenekler nesnesini input.required() işlevine göndererek zorunluluğu bir dönüştürmeyle birleştirebilirsiniz.

value = input.required({
  transform: numberAttribute
});

Her Biri Ne Zaman Kullanılmalı

Zorunlu bir bağlamayı mecbur kılmak için required'ı, gelen verileri dönüştürmek veya normalleştirmek için dönüştürmeleri kullanın; böylece bileşen mantığınız temiz ve tutarlı kalır.

Hızlı Kontrol

Zorunlu ve dönüştürülmüş girdilerle ilgili anlayışınızı sınayın.

Özet

Zorunlu girdiler için input.required() (null olamaz, varsayılan değeri yoktur), değerleri dönüştürmek içinse booleanAttribute ve numberAttribute dâhil transform seçeneğini kullanın. İkisi birlikte kullanılabilir.

Sıkça Sorulan Sorular

“Gerekli ve Dönüştürülmüş Input'lar” dersi ücretsiz mi?

Evet — “Gerekli ve Dönüştürülmüş 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.

“Gerekli ve Dönüştürülmüş Input'lar” dersinde ne öğreneceğim?

Input'ları gerekli olarak işaretleyin ve değerleri dönüştürü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 2. dersidir.

“Gerekli ve Dönüştürülmüş 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