Angular Academy · Ders

ngOnChanges ve Input Değişiklikleri

Input özelliklerindeki değişikliklere tepki verin.

ngOnChanges ve Input Değişiklikleri, 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.

Girdi Değişikliklerine Tepki Verme

OnChanges kancası, bir bileşenin @Input özellikleri her değiştiğinde tepki vermesini sağlar. Angular, ngOnChanges yöntemini ngOnInit'ten önce ve her girdi güncellemesinde çağırır.

OnChanges Uygulama

OnChanges arayüzünü uygulayın ve SimpleChanges nesnesi alan bir ngOnChanges yöntemi ekleyin.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

SimpleChanges Nesnesi

SimpleChanges, girdi adıyla anahtarlanmış bir eşlemdir. Her giriş, currentValue, previousValue ve firstChange içeren bir SimpleChange nesnesidir.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

İlk Değişikliği Algılama

firstChange bayrağı, bir girdi ilk kez ayarlandığında true olur. Başlatmayı sonraki güncellemelerden ayırmak için bunu kullanın.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Belirli Bir Girdiye Tepki Verme

Her döngüde her girdi değişmediği için okumadan önce anahtarın mevcut olduğunu her zaman kontrol edin.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Referansa Dayalı Algılama

ngOnChanges, nesneler ve dizilerdeki referans değişikliklerinde çalışır. Girdi olarak aktarılan bir nesneyi değiştirmek bunu tetiklemez.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

ngOnInit ile Sıralama

Oluşturma sırasında ngOnChanges önce ilk girdilerle çalışır, ardından ngOnInit çalışır. Bundan sonra girdiler her değiştiğinde ngOnChanges yeniden çalışır.

Eski ve Yeni Değerleri Karşılaştırma

Yaygın bir kullanım, yalnızca bir değer gerçekten farklı olduğunda tepki vermektir; örneğin bir kimlik girdisi değiştiğinde verileri yeniden yüklemek.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Güvenlik İçin Tür Belirtme

Değerleri changes içinden veya doğrudan bileşen özelliğinden okuyabilirsiniz; ngOnChanges sonrasında özellik zaten güncel değeri içerir.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

OnChanges Ne Zaman Kullanılmamalı

Tek bir girdiden türetilen durum için bir alıcı veya hesaplanmış değer daha temiz olabilir. ngOnChanges kullanımını, girdi güncellemelerinde çalışması gereken yan etkilerle sınırlayın.

Aynı Anda Birden Çok Girdi

Aynı döngüde birden çok girdi değişirse ngOnChanges, hepsini içeren SimpleChanges eşlemiyle bir kez çağrılır.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Hızlı Kontrol

OnChanges konusundaki anlayışınızı sınayın.

Özet

OnChanges kancası, currentValue, previousValue ve firstChange içeren bir SimpleChanges eşlemi aracılığıyla girdi değişikliklerine tepki verir. Referans değişikliklerinde çalıştığı için değişmez güncellemeler kullanın.

Sıkça Sorulan Sorular

“ngOnChanges ve Input Değişiklikleri” dersi ücretsiz mi?

Evet — “ngOnChanges ve Input Değişiklikleri” 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.

“ngOnChanges ve Input Değişiklikleri” dersinde ne öğreneceğim?

Input özelliklerindeki değişikliklere tepki verin. 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.

“ngOnChanges ve Input Değişiklikleri” 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