Ciclul de viață al componentelor unghiulare și diferitele sale metode explicate

Lansat în 2009 de Google, Angular este un cadru de dezvoltare JavaScript cu limbajul de programare Typescript. Este unul dintre cele mai populare cadre de design pentru dezvoltarea de aplicații. Cea mai bună parte a cadrului Angular este că este o aplicație open-source. Dezvoltatorii folosesc cadrul Angular pentru a crea aplicații mobile și web și pentru a vizualiza date. Pentru dezvoltarea Angular, dezvoltatorii trebuie să urmeze un proces extins numit ciclul de viață Angular.

Acest blog vă ajută să înțelegeți ciclul de viață Angular și diferitele sale metode de cârlig.

Ce este Angular Lifecycle?

Ciclul de evenimente necesar pentru a rula componentele Angular se numește ciclu de viață Angular. Componentele Angular sunt elementele de bază ale unei aplicații necesare pentru UI. În termeni simpli, componentele Angular sunt blocuri responsabile pentru controlul unui patch al ecranului într-o aplicație Angular. Componentele cuprind diverse proprietăți împreună cu un selector, șablon și stil. Componentele necesită, de asemenea, metadate pentru procesarea lor.

Angular parcurge diferiți pași de detectare a modificărilor pentru a urmări modificările proprietăților legate de date în timpul ciclului de viață. Un ciclu de viață Angular începe atunci când Angular inițiază o clasă de componente. Apoi definește vizualizarea componentei și vizualizarea componentelor copil. Spre final, Angular distruge componentele care nu mai sunt folosite. De asemenea, apelează diverse metode de cârlig după ce instanțiază o componentă.

Diferitele cârlige ale ciclului de viață ale componentelor Angular servesc ca funcționalitate în cadrul Angular. Fiecare metodă de cârlig permite dezvoltatorilor să ruleze diferite coduri în timpul unui anumit eveniment.

Învață cursuri de dezvoltare software online de la cele mai bune universități din lume. Câștigați programe Executive PG, programe avansate de certificat sau programe de master pentru a vă accelera cariera.

Ciclul de viață al componentelor unghiulare

Toate componentele Angular au un ciclu de viață diferit, împărțit în opt etape diferite. Aceste etape sunt numite evenimente hook ciclului de viață care pot fi utilizate separat în momentul aplicării. Înainte de începerea ciclului de viață, executăm constructorul clasei componente și apoi au loc diferitele evenimente hook. Evenimentele hook ale ciclului de viață Angular sunt împărțite în două categorii principale. O fază este legată de componenta originală, în timp ce a doua fază se referă la copiii acelei componente specifice.

Să înțelegem diferitele etape ale ciclului de viață unghiular:

• ngOnChanges:- Evenimentul ngOnChanges() apare atunci când modificăm valoarea unui control de intrare în cadrul componentei, iar proprietatea legată a componentei se modifică. În termeni simpli, această metodă de cârlig are loc ori de câte ori Angular setează sau resetează proprietățile de intrare ale componentei. În timpul acestei metode, un obiect „SimpleCharge” este primit pentru valorile proprietății curente și anterioare.
  Această metodă de cârlig primește o hartă de date modificată a valorilor proprietăților curente și anterioare. Harta de date este încapsulată ca SimpleCharge. Este pertinent să ne amintim că acest eveniment are loc foarte des. Prin urmare, trebuie să fiți extrem de atenți în timp ce efectuați orice modificări în timpul evenimentului, deoarece acestea pot avea un impact semnificativ asupra performanței. Trebuie să utilizați această metodă de cârlig numai dacă componenta are intrări legate și modificați proprietățile legate ale componentei. Prin urmare, este de obicei tratată ca o metodă de apel invers.
• ngOnInit:- Acest eveniment este folosit pentru a inițializa datele dintr-o componentă. ngOnInit() inițializează componenta sau directiva odată ce proprietățile legate de date sunt afișate de Angular și proprietățile de intrare sunt setate de componentă. Scopul principal al ngOnInit() este de a efectua inițializari complexe. Metoda hook folosește mai întâi componenta pentru a sursa datele inițiale sau variabilele locale în valori simple. Acesta este apoi folosit pentru a configura componenta odată ce Angular setează proprietățile de intrare. Evenimentul ngOnInit() este de obicei apelat după ngOnChanges dacă componenta are proprietăți legate. Totuși, dacă componenta nu conține nicio proprietate legată, putem executa direct evenimentul ngOnInit(). De asemenea, trebuie să vă amintiți că acest cârlig este numit o singură dată.
• ngDoCheck:- Acest eveniment hook are loc de fiecare dată când verificăm proprietățile unei metode de introducere. Evenimentul ngDoCheck este o parte integrantă a fiecărui ciclu de detectare a modificărilor și poate fi utilizat împreună cu propria dvs. verificare logică. Acest eveniment facilitează detectarea modificărilor personalizate sau a algoritmilor în componentă. Metoda de carte ngDoCheck permite detectarea acelor modificări pe care Angular nu le poate detecta. Puteți invoca ngDoCheck după ngOnChanges pentru fiecare rulare de detectare a modificărilor. Poate fi declanșat după ngOnInit la prima rulare, chiar dacă nu s-au făcut modificări proprietăților legate ale componentei.
  
• ngAfterContentInit:- Această etapă de cârlig sau metoda ciclului de viață este similară cu ngOnInit, deoarece apare o singură dată pe durata de viață a componentei. Puteți declanșa acest eveniment o singură dată când trebuie să verificați legăturile componentei pentru prima dată. Executăm acest eveniment după ce Angular efectuează orice activitate de proiecție de conținut în cadrul componentei. Cu cuvinte simple, ngAfterContentInit este executat atunci când există o proiecție a conținutului extern de către Angular în vederea componentei sau a vizualizării în care este prezentă o directivă. ngAfterContentInit este invocat Angular imediat după executarea metodei ngDoCheck. Această metodă ciclului de viață este legată de inițializările componentei copil.
  
• ngAfterContentChecked:- Această etapă de cârlig este o acțiune ulterioară metodei ngDoCheck. După cum sugerează și numele, metoda ngAfterContentChecked este executată după ce Angular detectează modificările conținutului extern care este proiectat în componentă. Acest eveniment are loc după fiecare ciclu de detectare a modificării. Este apelat după ngAfterContentInit() și după fiecare ngDoCheck(). La fel ca ngAfterContentInit, ngAfterContentChecked este, de asemenea, asociat cu inițializările componentelor copil.
  
• ngAfterViewInit:- ngAfterViewInit este declanșat după finalizarea inițializării vizualizării componentei. Este apelat o singură dată după metoda ciclului de viață ngAfterContentChecked(). Această metodă de cârlig este utilizată numai pentru componente și nu pentru componente copil.
  

  Cursuri populare și articole despre inginerie software

  Programe populare
  Program Executive PG în Dezvoltare Software - IIIT B	Programul de Certificat Blockchain - PURDUE	Programul de certificate de securitate cibernetică - PURDUE	MSC în Informatică - IIIT B
  Alte articole populare
  Salariu inginer cloud în SUA 2021-22	Salariu AWS Solution Architect în SUA	Salariu pentru dezvoltatori backend în SUA	Salariu pentru Dezvoltator Front End în SUA
  Salariu web developer in SUA	Întrebări de interviu Scrum Master în 2022	Cum să începi o carieră în securitatea cibernetică în 2022?	Opțiuni de carieră în SUA pentru studenții la inginerie

• ngAfterViewChecked:- Acest ciclu de viață este invocat odată ce Angular termină vizualizarea de detectare sau verificare a componentei sau a componentei secundare. Chiar dacă metoda ngAfterViewChecked este apelată după metoda ngAfterViewInit, ea este executată după fiecare etapă ulterioară a ciclului de viață ngAfterContentChecked(). Această metodă de cârlig este legată doar de componentele unghiulare .
  
• ngOnDestroy:- Metoda cârlig ngOnDestroy() este executată înainte ca Angular să distrugă componentele care nu mai sunt necesare. Această metodă ciclului de viață detașează evenimentele și ajută la evitarea oricăror scurgeri de memorie. De asemenea, dezabonează observabilele. Numim acest eveniment o singură dată înainte de a elimina componenta. Această metodă de cârlig servește ca o curățare înainte ca Angular să distrugă componenta.

Interfețe în Angular Lifecycle

Ciclurile de viață unghiulare sunt de obicei definite prin clasa de componente. Cu toate acestea, interfețele pot fi utilizate și pentru a defini clasa de componente Angular, deoarece diferitele metode de cârlig au deja o interfață Typescript asociată. De obicei înțelegem o interfață ca o caracteristică care ajută la identificarea diferitelor metode și proprietăți aferente. Chiar dacă nu este necesar, este foarte recomandat să implementați interfețe în ciclul de viață Angular. Scopul fiecărei interfețe este de a defini prototipul pentru metodele de cârlig. Interfețele sunt denumite cu prefixul „ng”.

Concluzie

Componentele unghiulare se bazează pe programarea dactilografică. Prin urmare, este necesar să cunoașteți elementele de bază ale programării dactilografe înainte de implementarea metodelor de cârlig a ciclului de viață unghiular. De asemenea, este esențial să învățați elementele fundamentale ale designului aplicației Angular, procesele metodelor ciclului de viață și cunoștințele despre care metodele de cârlig vor fi utilizate.

Dacă intenționați să urmați o carieră în dezvoltarea de aplicații Angular, trebuie să aveți o cunoaștere aprofundată a întregului proces și a funcțiilor diferitelor metode de cârlig. În plus, deoarece Angular este un cadru de dezvoltare javascript, trebuie să înveți limbajul de programare Java. Programul Executive PG de la upGrad în dezvoltarea software-ului este o opțiune excelentă pentru a afla despre dezvoltarea aplicației Angular de la zero.