Açısal Bileşenlerin Yaşam Döngüsü: Yöntemler, Farklı Türler ve Arayüz

Tanıtım

Hem web hem de mobil için uygulamaların oluşturulmasına izin veren istemci tarafı platformu açısaldır. 2009 yılında Google tarafından tanıtıldı. Başlangıçta platform, Angular TypeScript ve diğer komut dosyası dilleriyle değiştirilen Javascript ve HTML'yi destekledi.

Angular'ın birçok versiyonu, AngularJS'den Angular-7'ye vb. Hangi sürüm olursa olsun, açısal genellikle bileşenlerden oluşur. Bu nedenle, bileşenlerin anlaşılması, bileşenlerin işlenmesinin net bir şekilde anlaşılması için önemlidir.

Bununla birlikte, açısalın her bileşeninin, açısal yaşam döngüsünün her aşamasının başlatma adımlarından yıkım adımlarına geçtiği belirli bir yaşam tarzı vardır .

Makale, açısalın farklı bileşenlerinin yaşam döngüsündeki olaylara odaklanacaktır.

Yaşam Döngüsü Yöntemleri

Açısal içindeki bileşenler, farklı bir yaşam döngüsüne ve imhaya başlatma sürecinin gerçekleştirildiği belirli sayıda aşamaya sahiptir. Bileşenlerin farklı aşamaları, 'yaşam döngüsü kanca olayı' olarak adlandırılır.

Bileşenleri açısal olarak kontrol etmek için geliştiriciler, uygulamanın farklı aşamalarında kanca olaylarını kullanabilir. Geliştiricilerin açısalın herhangi bir bileşeninde kullanabilecekleri sekiz tür yaşam döngüsü kanca olayı mevcuttur. Belirli yaşam döngüsü olayına karşılık gelen işlev çağrısı, geliştirici tarafından eklenmelidir.

Bileşenler bir TypeScript sınıfına ait olduğundan, her bileşen için bir yapıcı yöntemi bulunmalıdır. Açısal yaşam döngüsü kancalarından herhangi birinin yürütülmesinden önce ilk çalıştırılan her zaman bileşen sınıfı yapıcısıdır . Herhangi bir bağımlılık eklemek için, gerekli görev için yapıcı kullanılabilir. Açısal yaşam döngüsü kancaları belirli bir sırada yürütülür .

Herhangi bir bileşenin açısal olarak başlatılması olduğunda, kök bileşenler oluşturulur ve sunulur. Bileşenlerin mirasçısı daha sonra üretilir.

Yaşam döngüsü aşamalarının bölünmesi iki aşamada gerçekleşir: bileşene bağlanan bir aşama ve bileşenin alt öğelerine bağlanan bir aşama.

Ayrıca Okuyun: Heyecan Verici Açısal Proje Fikirleri

Yaşam Döngüsü kancasının Farklı Türleri

1. ngOnChanges –

Bu olay, girişin kontrol değerinde bir değişiklik olduğunda her zaman çağrılır. Bağlı olan bir özelliğin değerindeki değişiklik bu olayı tetikler. Değişiklikleri içeren bir veri haritası, yani bir SimpleChange içindeki özelliğin önceki ve mevcut değeri.

• Özellikleri
  • Girdisi olan bileşenler yöntemi kullanabilir.
  • Girdinin değerinde bir değişiklik olduğunda, yöntem çağrılır.

2. ngOnInit

Bileşenin başlatılmasından veya bağlı verilerin özelliklerinin görüntülenmesinden sonra, ngOnInit olayı başlatılır. Olay, yalnızca ngOnChanges olayından sonra bir kez çağrılır. Bu nedenle, olay esas olarak bileşen verilerinin başlatılmasından sorumludur.

• Özellikleri
  • Bir bileşendeki veriler bu olay tarafından başlatılır.
  • Girişin değerleri ayarlandığında yöntem çağrılır.
  • Angular CLI, varsayılan olarak bu kancayı tüm bileşenlerine eklemiştir.
  • Yöntem yalnızca bir kez çağrılabilir.

3. ngDoCheck

Açısal bileşenlerin giriş özellikleri kontrol edildikten sonra, ngDoCheck olayının tetiklenmesi gerçekleşir. Esas olarak, açısalın tespit edemediği değişiklikleri tespit etmek veya bunlara göre hareket etmek için yapılır. Geliştiricinin mantığına göre, kontrol uygulanabilir. Bu nedenle, herhangi bir bileşendeki değişikliğin tespiti için herhangi bir özel değişiklik mantığının veya algoritmalarının uygulanmasına olay tarafından izin verilir.

• Özellikleri
  • Herhangi bir değişiklik tespiti için açısal bu yöntemi çalıştırır.
  • Yöntem, değişiklikleri algılamak için çağrılır.

4. ngAfterContentInit –

Bileşenin görünümü içindeki harici içeriğin yansıtılmasından sonra, ngAfterContentInit olayı çağrılır. Tüm bileşen bağlamalarını ilk kez kontrol etmek için bu yöntem ilk kez yürütülür. Yürütülmesi, ngDoCheck() yönteminin yürütülmesinden hemen sonra gelir. Alt bileşen genellikle bu yöntemle bağlantılıdır.

• Özellikleri
• • Başlangıçta, yöntem ngDoCheck'ten sonra çağrılır.

• • İş, içerik başlatma ile yapılır.

5. ngAfterContentChecked –

Dış içeriğin bileşene yansıtılması, yansıtılan içeriğin kontrol edilmesiyle takip edilir. Yöntem, açısal değişiklik algılama mekanizması aracılığıyla içerik denetimi her yapıldığında çağrılır. ngAfterContentInit() yönteminin yürütülmesinden sonra yürütülür. Ayrıca, yöntem ngDoCheck()'in sonraki yürütülmesinden sonra yürütülür. Genellikle alt bileşenlerin başlatılmasıyla bağlantılıdır.

• Özellikleri

• • Başlamak için yöntem, ngContentInit'in tamamlanmasını bekler.

• • Yürütme ngDocheck'ten sonra yapılır.

6. ngAfterViewInit

Açısal bileşenlerin ve alt bileşenlerin başlatılmasıyla ngAfterViewInit yöntemi çağrılır. ngAfterContentChecked yönteminin yürütülmesinden sonra, ilk kez ngAfterViewInit yöntemi çağrılır. Yöntem yalnızca açısal bileşenlerine uygulanabilir.

• Özellikleri

  • Bileşenin görünümü başlatıldıktan sonra yalnızca bir kez yöntem çağrısı oluşturulur.

7. ngAfterViewChecked –

ngAfterViewInit yönteminden hemen sonra ngAfterViewChecked yöntemi çağrılır. Angular'ın değişiklik algılama yöntemi, bileşenler üzerinde kontrollerini yaptığında, ngAfterViewChecked yöntemi yürütülür. Yöntem ayrıca ngAfterContentChecked() yürütüldükten sonra da yürütülür. Ayrıca, alt bileşenin yönergelerinin bağlanması değiştirildiğinde, yöntem yürütülür.

• Özellikleri

• • Çağrı, başlatma ve kontrolden sonra oluşturulur.

• • Metodun çalışmasına ngDocheck'in her metodu tamamlandıktan sonra başlanır.

8. ngOnDestroy

Yöntem, bileşenlerin açısal olarak yok edilmesinden hemen önce çağrılır. Bellek sızıntısı senaryolarından kaçınmak için, yöntem olay işleyicilerini ayırabilir ve ayrıca abonelikten çıkma gözlemlenebilirlerinde de faydalıdır. Yalnızca bir kez, bileşeni DOM'dan kaldırmak için yöntem çağrılır.

• Özellikleri

• • Çağrı, bileşenlerin DOM'dan kaldırılmasından hemen önce oluşturulur.

Açısal Yaşam Döngüsündeki Arayüzler

Bileşenlerin sınıfı, açısal yaşam döngüsü kanca yöntemlerini tanımlamak için kullanılabilir. Ancak, arayüzlerin yardımıyla yöntemler çağrılabilir. Arayüzlerin adları, “ng” öneki hariç, yöntem adlarına benzer. Bunun nedeni, yaşam döngüsü kancalarının yöntemlerinin her biri ile bir daktilo metni arabiriminin bulunmasıdır. Örneğin, ngOnInit'in arayüzüne OnInit adı verilir. Yaşam döngüsü kancasının yalnızca bir olayı, tek bir arabirim aracılığıyla tanımlanır. Ayrıca, arayüzler uygulanmadığında derleyici herhangi bir derleme hatası vermez.

Örnek vermek:

Bir yaşam döngüsü kancasını uygulamak için bir örnek gösterilmiştir. Aşağıda gösterilen kod, 'app.component.ts' dosyasına yerleştirilmelidir. Kaynak

ngOnInit yaşam döngüsü kancasının nasıl çağrılacağını gösterir.

'ng-example' deposuna bir modül ekleme örneği aşağıda gösterilmiştir. Modül adı, değişiklikler örneği olarak adlandırılan bir 'ngOnChanges' örneği için bileşenlere (hem ana hem de alt öğe) sahip yaşam döngüsü kancalarıdır. Bileşen yaşam döngüsü kancalarına yönlendirme için, kenar çubuğuna yönlendirme eklenir ve 'değişiklik örneği' bileşeni bu bileşenin içine yerleştirilir. Bu, alt bileşenle birlikte ana bileşeni gösterir.

Yaşam döngüsü kancalarının tüm yöntemleri, konsol.log() adlı olay kancasının adıyla birlikte her iki bileşene de eklenecektir. Alt öğe, ebeveyn ve alt bileşenleri ayırt etmek için alt konsolun ifadelerine eklenir.

Ana bileşenin görünümü aşağıda gösterilmiştir.

Kaynak

Alt bileşen aynıdır ancak bu, console.log'un deyimlerinin bir parçasıdır.

Ning servisinin çalıştırılması, olayların tetiklenme sırasını gösterecektir. Yürütülen yöntemlerin sırasını açıklar. Bileşenin başlatılması, içeriği, içeriğin kontrolü, başlatma ve alt bileşenin kontrolü. Bunu, bileşenin görünümünün başlatıldığı ve kontrol edildiğine dair nihai beyan takip eder.

Ayrıca Okuyun: Açısal Proje nasıl çalıştırılır

Bir sonraki adımda, ana bileşen, alt öğeye bir girdinin bazı değerlerinin manipüle edildiği basit bir olayla eklenir. Bunun için, ana bileşene, tıklandığında sayıyı bir değer artıracak bir düğme eklenir. Artış, alt öğeye girdi olarak iletilecek ve görüntülenecektir.

Kaynak

Üst html'nin görünümü

'Num' girişi şu şekilde görüntülenir:

<h4>{{num}}</h4>

'+' düğmesine tıklandığında, yaşam döngüsü kancalarının olaylarının bileşenler üzerinde yürütüleceği bir olayın tetiklenmesi olacaktır. Çocuğa giriş değeri 'ngOnChanges' tarafından algılandığından, alt öğede 'ngOnChanges' olayı tetiklenir.

Dünyanın En İyi Üniversitelerinden Online Yazılım Kursları Öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Çözüm

Makale, açısal bileşenlerin aşamalarına genel bir bakış sağladı. Açısal yaşam döngüsü kancalarının ilerlediği özel sıra tartışılır ve ayrıca bu tür olayların uygulanması gösterilir.

Bu tür yazılım bileşenlerinin uygulamasını genişletmek için upGrad'ın “ Yazılım Geliştirmede Yönetici PG Programı – Tam Yığın Geliştirmede Uzmanlaşma ” kursuna göz atabilirsiniz. 21 ila 45 yaş arasındaki herhangi bir orta seviye profesyonel, IIIT-Bangalore sertifikalı kursa katılabilir. Çevrimiçi kurs, canlı derslerin, uygulamalı deneyimlerin, IIIT-B mezunlarının statüsünün ve 4 aylık Veri Bilimi ve Makine Öğrenimi sertifikasının ücretsiz olarak faydalarını sunar. Hala hayalinizdeki işi almayı hedefliyorsanız, en iyi endüstrilere yerleştirme sağlayan kursa gidin. Herhangi bir sorunuz ekibimiz tarafından memnuniyetle karşılanmaktadır.