Component Yaşam Döngüsü

Bir component yaşam döngüsü, bileşenin oluşturulması ve yok edilmesi arasında gerçekleşen adımlar dizisidir. Her adım, Angular’ın componentleri nasıl renderladığı ve zamanla güncellemelerini kontrol ettiği sürecin farklı bir bölümünü temsil eder.

Bileşenlerinizde, bu adımlar sırasında kod çalıştırmak için lifecycle hook uygulayabilirsiniz. Belirli bir bileşen örneğiyle ilgili olan lifecycle hook, bileşen sınıfınızda yöntemler olarak uygulanır. Angular uygulamasını bir bütün olarak ilgilendiren lifecycle hook, geri arama kabul eden işlevler olarak uygulanır.

Bir bileşenin yaşam döngüsü, Angular’ın bileşenlerinizde zaman içinde değişiklik olup olmadığını nasıl kontrol ettiğiyle yakından ilişkilidir. Bu yaşam döngüsünü anlamak için, Angular’ın uygulama ağacınızı yukarıdan aşağıya doğru yürüdüğünü ve değişiklikler için şablon bağlamalarını kontrol ettiğini bilmeniz yeterlidir. Aşağıda açıklanan lifecycle hook, Angular bu geçişi yaparken çalışır. Bu çapraz geçiş her bileşeni tam olarak bir kez ziyaret eder, bu nedenle sürecin ortasında başka durum değişiklikleri yapmaktan her zaman kaçınmalısınız.

Özet #

ngOnInit #

ngOnInit yöntemi, Angular tüm bileşen girdilerini ilk değerleriyle başlattıktan sonra çalışır. Bir bileşenin ngOnInit’i tam olarak bir kez çalışır.

Bu adım, bileşenin kendi şablonu başlatılmadan önce gerçekleşir. Bu, bileşenin durumunu ilk girdi değerlerine göre güncelleyebileceğiniz anlamına gelir.

ngOnChanges #

ngOnChanges yöntemi, herhangi bir bileşen girdisi değiştikten sonra çalışır.

Bu adım, bileşenin kendi şablonu kontrol edilmeden önce gerçekleşir. Bu, bileşenin durumunu ilk girdi değerlerine göre güncelleyebileceğiniz anlamına gelir.

Başlatma sırasında ilk ngOnChanges, ngOnInit’ten önce çalışır.

Değişikliklerin incelenmesi #

ngOnChanges yöntemi bir SimpleChanges argümanı kabul eder. Bu nesne, her bileşen giriş adını bir SimpleChange nesnesine eşleyen bir Record‘dur. Her SimpleChange, girişin önceki değerini, mevcut değerini ve bu girişin ilk kez değişip değişmediğine dair bir bayrağı içerir.

@Component({
  /* ... */
})
export class UserProfile {
  @Input() name: string = '';
  ngOnChanges(changes: SimpleChanges) {
    for (const inputName in changes) {
      const inputValues = changes[inputName];
      console.log(`Previous ${inputName} == ${inputValues.previousValue}`);
      console.log(`Current ${inputName} == ${inputValues.currentValue}`);
      console.log(`Is first ${inputName} change == ${inputValues.firstChange}`);
    }
  }
}

Herhangi bir girdi özelliği için bir takma ad sağlarsanız, SimpleChanges Record anahtar olarak takma ad yerine TypeScript özellik adını kullanmaya devam eder.

ngOnDestroy #

ngOnDestroy yöntemi, bir bileşen yok edilmeden hemen önce bir kez çalışır. Angular, NgIf tarafından gizlendiğinde veya başka bir sayfaya gidildiğinde olduğu gibi, sayfada artık gösterilmediğinde bir bileşeni yok eder.

DestroyRef #

ngOnDestroy yöntemine alternatif olarak, DestroyRef‘in bir örneğini enjekte edebilirsiniz. DestroyRef‘in onDestroy yöntemini çağırarak bileşenin yok edilmesi üzerine çağrılacak bir geri çağırma kaydedebilirsiniz.

@Component({
  /* ... */
})
export class UserProfile {
  constructor(private destroyRef: DestroyRef) {
    destroyRef.onDestroy(() => {
      console.log('UserProfile destruction');
    });
  }
}

DestroyRef örneğini bileşeninizin dışındaki fonksiyonlara veya sınıflara aktarabilirsiniz. Bileşen yok edildiğinde bazı temizleme davranışlarını çalıştırması gereken başka kodlarınız varsa bu kalıbı kullanın.

Tüm temizleme kodunu ngOnDestroy yöntemine koymak yerine kurulum kodunu temizleme koduna yakın tutmak için DestroyRef‘i de kullanabilirsiniz.

ngDoCheck #

ngDoCheck yöntemi, Angular’ın bir bileşenin şablonunda değişiklik olup olmadığını her kontrol edişinden önce çalışır.

Bu lifecycle hook, Angular’ın normal değişiklik tespiti dışındaki durum değişikliklerini manuel olarak kontrol etmek ve bileşenin durumunu manuel olarak güncellemek için kullanabilirsiniz.

Bu yöntem çok sık çalışır ve sayfanızın performansını önemli ölçüde etkileyebilir. Mümkün olduğunca hook tanımlamaktan kaçının, yalnızca alternatifiniz olmadığında kullanın.

Başlatma sırasında, ilk ngDoCheck, ngOnInit’ten sonra çalışır.

ngAfterViewInit #

ngAfterViewInit yöntemi, bileşenin şablonundaki (görünümündeki) tüm alt öğeler başlatıldıktan sonra bir kez çalışır.

Görünüm sorgularının sonuçlarını okumak için lifecycle hook kullanabilirsiniz. Bu sorguların başlatılmış durumuna erişebilseniz de, bu yöntemde herhangi bir durumu değiştirmeye çalışmak ExpressionChangedAfterItHasBeenCheckedError ile sonuçlanır.

ngAfterContentInit #

ngAfterContentInit yöntemi, bileşenin (içeriğinin) içine yerleştirilmiş tüm children başlatıldıktan sonra bir kez çalışır.

İçerik sorgularının sonuçlarını okumak için bu yaşam döngüsü kancasını kullanabilirsiniz. Bu sorguların başlatılmış durumuna erişebilseniz de, bu yöntemde herhangi bir durumu değiştirmeye çalışmak ExpressionChangedAfterItHasBeenCheckedError ile sonuçlanır.

ngAfterViewChecked #

ngAfterViewChecked yöntemi, bileşenin şablonundaki (görünümündeki) alt öğeler her değişiklik için kontrol edildiğinde çalışır.

Bu yöntem çok sık çalışır ve sayfanızın performansını önemli ölçüde etkileyebilir. Mümkün olduğunca hook tanımlamaktan kaçının, yalnızca alternatifiniz olmadığında kullanın.

Görünüm sorgularının güncellenmiş durumuna (view queries) buradan erişebilirsiniz, ancak bu yöntemde herhangi bir durumu değiştirmeye çalışmak ExpressionChangedAfterItHasBeenCheckedError ile sonuçlanır.

ngAfterContentChecked #

ngAfterContentChecked yöntemi, bileşenin (içeriğinin) içinde yuvalanmış alt öğeler her değişiklik için kontrol edildiğinde çalışır.

Bu yöntem çok sık çalışır ve sayfanızın performansını önemli ölçüde etkileyebilir. Mümkün olduğunca hook tanımlamaktan kaçının, yalnızca alternatifiniz olmadığında kullanın.

İçerik sorgularının güncellenmiş durumuna (content queries) buradan erişebilirsiniz, ancak bu yöntemde herhangi bir durumu değiştirmeye çalışmak ExpressionChangedAfterItHasBeenCheckedError ile sonuçlanır.

afterRender ve afterNextRender #

afterRender ve afterNextRender fonksiyonları, Angular sayfadaki tüm bileşenleri DOM’a işlemeyi tamamladıktan sonra çağrılacak bir render geri çağrısı kaydetmenizi sağlar.

Bu işlevler, bu kılavuzda açıklanan diğer lifecycle hook farklıdır. Bir sınıf yönteminden ziyade, bir geri arama kabul eden bağımsız işlevlerdir. Render geri aramalarının yürütülmesi belirli bir bileşen örneğine bağlı değildir, bunun yerine uygulama genelinde bir hook olur.

afterRender ve afterNextRender bir  injection context, tipik olarak bir bileşenin kurucusunda çağrılmalıdır.

Manuel DOM işlemleri gerçekleştirmek için render callback’lerini kullanabilirsiniz. Angular’da DOM ile çalışma konusunda rehberlik için  Using DOM APIs bölümüne bakın.

Render callback’leri sunucu tarafı rendering sırasında veya derleme zamanı ön rendering sırasında çalışmaz.

afterRender aşamaları #

afterRender veya afterNextRender kullanırken, isteğe bağlı olarak bir aşama belirtebilirsiniz. Aşama, DOM işlemlerinin sıralanması üzerinde kontrol sahibi olmanızı sağlayarak,  layout thrashing en aza indirmek için yazma işlemlerini okuma işlemlerinden önce sıralamanıza olanak tanır.

import {Component, ElementRef, afterNextRender, AfterRenderPhase} from '@angular/core';
@Component({...})
export class UserProfile {
  private elementHeight = 0;
  constructor(elementRef: ElementRef) {
    const nativeElement = elementRef.nativeElement;
    // Use the `Write` phase to write to a geometric property.
    afterNextRender(() => {
      nativeElement.style.padding = computePadding();
    }, {phase: AfterRenderPhase.Write});
    // Use the `Read` phase to read geometric properties after all writes have occurred.
    afterNextRender(() => {
      this.elementHeight = nativeElement.getBoundingClientRect().height;
    }, {phase: AfterRenderPhase.Read});
  }
}

Aşağıdaki sırayla yürütülen dört aşama vardır:

Yaşam döngüsü arayüzleri #

Angular, her yaşam döngüsü yöntemi için bir TypeScript arayüzü sağlar. Uygulamanızda herhangi bir yazım hatası veya yazım yanlışı olmadığından emin olmak için isteğe bağlı olarak bu arayüzleri içe aktarabilir ve uygulayabilirsiniz.

Her arayüz, ng ön eki olmadan ilgili yöntemle aynı ada sahiptir. Örneğin, ngOnInit için arayüz OnInit‘tir.

@Component({
  /* ... */
})
export class UserProfile implements OnInit {
  ngOnInit() {
    /* ... */
  }
}

Çalıştırma sırası #

Aşağıdaki diyagramlar, Angular’ın yaşam döngüsü kancalarının yürütme sırasını göstermektedir.

Başlatma sırasında #

Sonraki güncellemeler #

Yönergeler ile sıralama #

Bir bileşenle aynı öğeye bir veya daha fazla yönerge koyduğunuzda, bir şablonda veya hostDirectives özelliğiyle, çerçeve, bileşen ile tek bir öğedeki yönergeler arasında belirli bir yaşam döngüsü kancasının herhangi bir sıralamasını garanti etmez. Angular’ın sonraki sürümlerinde bu durum değişebileceğinden, gözlemlenen bir sıralamaya asla güvenmeyin.