Angular component’ leri oluşturup, render ettikten sonra, o component’ in özelliklerini(data, template vb) takip eder ve DOM’ dan silmeden öncede yok eder.

Angular baştan sona, component’ in yaşam döngüsü içerisindeki önemli anları kendisine bildirim yapar. Bu bildirimleri, ilgili event’ lerin interface’ lerini implement ederek kullanabiliriz.
Directive’ ler içinde aynı özelliği sunar.

Örnek kullanım;

export class ProductList implements OnInit {
  constructor() { }

  ngOnInit() { 
      this.page = 'product list';
  }

}
  • Component ngOnInit interface’ ini implemente etti.

  • ngOnInit interface’ inin ngOnInit metodunu da ekledi ve, component Angular tarafından oluşturulduğunda, bu metod tetiklenecektir.

Yaşam Döngüsü(Lifecycle) sıralaması

Event Zamanlaması
ngOnChanges() input değerleri değiştiğinde, Angular tarafından ilgili input değerlerinin eski ve yeni halini içeren SimpleChanges objesi iletilir
ngOnInit() Component çalışmaya başlayıp, kendisine bağlı veriler gösterildikten hemen sonra tetiklenir

Devamını https://angular.io/guide/lifecycle-hooks adresinden inceleyebilirsiniz.

Interface opsiyoneldir

Daha önce TypeScript ile kod yazmamış kişiler, Interface’ leri görünce şaşırabilir. Çünkü Javascript’ te interface kavramı hiçbir zaman olmamıştır. Angular çalışma anında, interface’ leri görmemektedir.
Kullandığımız interface’ lerin hepsi, sadece kod yazarken, ilgili editor’ ün de TypeScript’ i anlayabilmesi sayesinde, o an çalışmaktadır. Interface’ leri kullanmamızın sebebi, daha sağlıklı ve stabil kod yazabilmemiz içindir.

Özetle, javascript’ in sahip olmadığı interface yapısını, kod yazarken TypeScript ile sağlamaktır.

İlgili class a interface eklesenizde, eklemeseniz de, Angular ilgili component yada directive’ in class’ ını inceleyecek, örneğin ngOnInit metodunu çağırmayı deneyecektir, eğer o component’ te o metod yok ise, hata vermeyecektir !
Çünkü javascript’ in herhangi bir objenin, herhangi bir metodu tanımlı mı diye sorabileceği "typeof" gibi kontrolleri vardır. https://www.w3resource.com/javascript/operators/typeof.php adresinden inceleyebilirsiniz.

Interface’ lerin olması sadece bir zenginliktir. Java, .Net, PHP vb. dillerdeki gibi, daha kurallı kod yazabiliriz.

Last modified: 10 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.