Angular Lifecycle Hooks

Lifecyle Hook Nedir?

Bir componentin kullanım ömrü boyunca meydana gelen olaylara “Lifecycle” denir. Hook’lar Angular uygulamalarındaki bir componentin ömrünün belirli bir noktasında çağırabileceği basit işlevlerdir. Bu Lifecycle Hooklarının bir componentin yaşam döngüsünde bir olay meydana geldiğinde Angular’ın o olayın olduğu vakte ulaşmak için yarattığı yapılar da diyebiliriz. Bir componentin veya directive’in yaşam döngüsünde 8 farklı tür hook vardır ve çalışma sırası aşağıdaki fotoğraftaki gibidir.

NgOnChanges()

Bu callback fonksiyonu veriye bağlı bir değişiklik olduğunda çağırılır. Bu olayın denetimi component kendi içinde yenilenirken gerçekleşir.

Bu hook sayesinde child bir component ile iletişimi için kullanılır.Örneğin bir input değişikliğinde çağırılabilir.Yaşam döngüsünde ilk çalıştırılan hook’tur

Not: Her değişiklikle beraber çağırılacağı için performansı olumsuz etkileyeceğini unutmayın!

Özellikleri

• Input değişkeni olan her componentte kullanıılır.
• Input değeri her değiştiğinde çağırılır.

NgOnInit()

Angular component oluşumunu tamamladıktan sonra (constructordan hemen sonra) bu callback fonksiyonunu çağırır. Dataya bağlı özellikler görüntülenirken başlatılır. Aklınıza şu soru gelebilir neden bu verileri constructordan çekmeyelim ki ? Benim de aklıma ilk bu soru geldi ancak bir çok geliştirici constructorda sadece class üyelerinin başlatılmasını diğer işlerin ngOnInit’te yapılmasını öneriyor.

Özellikler

• Componentin verilerini çekerken kullanılır.
• Input verileri set edildikten sonra çağırılır.
• Default olarak her componentte Angular CLI tarafından eklenir.
• Sadece bir kez çağırılır.

NgDoCheck()

Genel olarak bir componentin veya bir directive’in gözden geçirmenin önemli olduğu durumlarda kullanılır.Bu hook aracılığıyla uygulamak istediğiniz logic kontrolleri sağlayabilirsiniz.

NgOnInit’ten hemen sonra çağırılır ve componentte herhangi bir değişiklik olmasa bile işlenir. Herhangi bir input değişikliğini tespit etmek, veriyi logic kontrolünden sonra getirmek istendiğinde kullanılır.

Özellik

• Herhangi bir değişikliği tespit etmek istendiğinde çağırılır.

NgAfterContentInit()

Html içeriğini componentin dışından içeri aktarmak için kullanılır. Child componente contenti aktarılmak istendiğinde kullanılır. Harici child componentler “<ng-content></ng-content>” içerisinde kullanılır.

Özellikler

• NgDoCheckten sonra çağırılır.
• Contenti initialize eder.

NgAfterContentChecked()

Componente veya directive’e aktarılan contenti kontrol etmek için kullanılır.

component içerisinde bir değişiklik kontrolünü sağlar. Componentte herhangi bir değişiklik olmasa da çalışır.

Özellikler

• NgAfterContentInit’ten sonra çağırılır.

NgAfterViewInit()

NgAfterContentChecked’den hemen sonra çağırılır.NgAfterContentInit’te .ok benzer ancak view yüklendikten sonra çağırılır.

Özellikler

• Bir kez çağırılır.
• Sadece componentlerde kullanılır.

NgAfterViewChecked()

Bu hook componentin ve child componentin view’i kontrol edilirken çağırılır.

Döngüde hemen NgAfterViewInit’in arkasında gelir.

NgOnDestroy()

Angular, componentleri ve direktiveleri destroy ettikten sonra çağırır. Tüm observable isteklerin ve temizleme logicinin kullanıldığı yerdir. Bellek sızıntısının önlediği hook’tur.

Özellikler

• Componentler DOM’dan kaldırılmadan hemen önce çağırılır.