Objaśnienie cyklu życia komponentów kątowych i jego różnych metod

Uruchomiony w 2009 roku przez Google, Angular jest frameworkiem programistycznym JavaScript z językiem programowania Typescript. Jest to jeden z najpopularniejszych frameworków projektowych do tworzenia aplikacji. Najlepsze w frameworku Angular jest to, że jest to aplikacja typu open source. Programiści używają platformy Angular do tworzenia aplikacji mobilnych i internetowych oraz wizualizacji danych. W przypadku rozwoju Angulara programiści muszą postępować zgodnie z rozległym procesem zwanym cyklem życia Angulara.

Ten blog pomoże Ci zrozumieć cykl życia Angulara i jego różne metody przechwytujące.

Co to jest cykl życia kątowego?

Cykl zdarzeń wymaganych do uruchomienia komponentów Angulara nazywa się cyklem życia Angulara. Komponenty Angular to elementy budulcowe aplikacji niezbędne dla interfejsu użytkownika. Mówiąc prościej, komponenty Angulara to bloki odpowiedzialne za kontrolowanie łatki ekranu w aplikacji Angulara. Komponenty obejmują różne właściwości wraz z selektorem, szablonem i stylem. Komponenty wymagają również metadanych do ich przetwarzania.

Angular przechodzi przez różne kroki wykrywania zmian, aby śledzić zmiany we właściwościach powiązanych z danymi podczas cyklu życia. Cykl życia Angulara rozpoczyna się, gdy Angular inicjuje klasę komponentu. Następnie definiuje widok komponentu i widok komponentów podrzędnych. Pod koniec Angular niszczy komponenty, które nie są już używane. Wywołuje również różne metody przechwytujące po utworzeniu instancji komponentu.

Różne haki cyklu życia komponentu Angular służą jako funkcje w strukturze Angular. Każda metoda podpięcia pozwala programistom na uruchamianie różnych kodów podczas konkretnego wydarzenia.

Ucz się kursów rozwoju oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Cykl życia komponentów kątowych

Wszystkie komponenty Angulara mają inny cykl życia podzielony na osiem różnych etapów. Te etapy są nazywane zdarzeniami haka cyklu życia, które mogą być używane oddzielnie w momencie aplikacji. Przed rozpoczęciem cyklu życia wykonujemy konstruktor klasy komponentu, a następnie zachodzą różne zdarzenia zaczepienia. Zdarzenia hakowe cyklu życia Angulara dzielą się na dwie główne kategorie. Jedna faza jest połączona z oryginalnym komponentem, podczas gdy druga faza dotyczy dzieci tego konkretnego komponentu.

Rozumiemy różne etapy cyklu życia kąta:

• ngOnChanges: — Zdarzenie ngOnChanges() występuje, gdy zmieniamy wartość kontrolki wejściowej w komponencie, a właściwość powiązana komponentu ulega zmianie. Mówiąc prościej, ta metoda haka ma miejsce za każdym razem, gdy Angular ustawia lub resetuje właściwości przychodzące składnika. Podczas tej metody odbierany jest obiekt „SimpleCharge” dla bieżącej i poprzedniej wartości właściwości.
  Ta metoda przechwytująca odbiera zmienioną mapę danych bieżących i poprzednich wartości właściwości. Mapa danych jest opakowana jako SimpleCharge. Warto pamiętać, że to wydarzenie ma miejsce bardzo często. Dlatego musisz być bardzo ostrożny podczas przeprowadzania wszelkich zmian podczas imprezy, ponieważ może to znacząco wpłynąć na wydajność. Musisz użyć tej metody przechwycenia tylko wtedy, gdy składnik ma powiązane dane wejściowe i zmienisz powiązane właściwości składnika. Dlatego jest zwykle traktowana jako metoda oddzwaniania.
• ngOnInit: — To zdarzenie służy do inicjalizacji danych w komponencie. ngOnInit() inicjuje komponent lub dyrektywę, gdy właściwości powiązane z danymi są wyświetlane przez Angular, a właściwości wejściowe są ustawiane przez komponent. Podstawowym celem ngOnInit() jest wykonywanie złożonych inicjalizacji. Metoda przechwytująca najpierw używa komponentu do źródła danych początkowych lub zmiennych lokalnych w postaci prostych wartości. Jest on następnie używany do konfiguracji komponentu, gdy Angular ustawi właściwości wejściowe. Zdarzenie ngOnInit() jest zwykle wywoływane po ngOnChanges, jeśli składnik ma powiązane właściwości. Jeśli jednak komponent nie zawiera żadnych powiązanych właściwości, możemy bezpośrednio wykonać zdarzenie ngOnInit(). Musisz też pamiętać, że ten hak jest wywoływany tylko raz.
• ngDoCheck: — To zdarzenie przechwycenia występuje za każdym razem, gdy sprawdzamy właściwości metody wejściowej. Zdarzenie ngDoCheck jest integralną częścią każdego cyklu wykrywania zmian i może być używane wraz z własnym testem logicznym. To zdarzenie ułatwia wykrywanie niestandardowych zmian lub algorytmów w komponencie. Metoda książki ngDoCheck pozwala wykryć te zmiany, których Angular nie może wykryć. Możesz wywołać ngDoCheck po ngOnChanges dla każdego uruchomienia wykrywania zmian. Może zostać wywołany po ngOnInit przy pierwszym uruchomieniu, nawet jeśli nie dokonano żadnych zmian w powiązanych właściwościach komponentu.
  
• ngAfterContentInit: — Ten etap zaczepienia lub metoda cyklu życia jest podobna do ngOnInit, ponieważ występuje tylko raz w okresie życia składnika. Możesz wywołać to zdarzenie jednorazowo, gdy po raz pierwszy musisz sprawdzić powiązania komponentu. Wykonujemy to zdarzenie po wykonaniu przez Angular jakiejkolwiek czynności związanej z projekcją treści w komponencie. Mówiąc prościej, ngAfterContentInit jest wykonywany, gdy istnieje projekcja zawartości zewnętrznej przez Angular na widok komponentu lub widok, w którym obecna jest dyrektywa. ngAfterContentInit jest wywoływany Angular natychmiast po wykonaniu metody ngDoCheck. Ta metoda cyklu życia jest związana z inicjalizacją składnika podrzędnego.
  
• ngAfterContentChecked: — Ten etap zaczepienia jest kolejnym działaniem metody ngDoCheck. Jak sama nazwa wskazuje, metoda ngAfterContentChecked jest wykonywana po tym, jak Angular wykryje zmiany w zawartości zewnętrznej, która jest rzutowana w komponencie. To zdarzenie ma miejsce po każdym cyklu wykrywania zmian. Jest wywoływana po ngAfterContentInit() i każdym kolejnym ngDoCheck(). Podobnie jak ngAfterContentInit, ngAfterContentChecked jest również powiązany z inicjalizacją komponentów podrzędnych.
  
• ngAfterViewInit: — ngAfterViewInit jest wyzwalane po zakończeniu inicjalizacji widoku komponentu. Jest wywoływana tylko raz po metodzie cyklu życia ngAfterContentChecked(). Ta metoda zaczepienia jest używana tylko dla komponentów, a nie komponentów podrzędnych.
  

  Popularne kursy i artykuły na temat inżynierii oprogramowania

  Popularne programy
  Program Executive PG w tworzeniu oprogramowania - IIIT B	Program certyfikacji Blockchain - PURDUE	Program Certyfikatów Cyberbezpieczeństwa - PURDUE	MSC w informatyce - IIIT B
  Inne popularne artykuły
  Wynagrodzenie Cloud Engineer w USA 2021-22	Wynagrodzenie architekta rozwiązań AWS w USA	Wynagrodzenie programisty zaplecza w USA	Wynagrodzenie programisty front-end w USA
  Wynagrodzenie programisty w USA	Pytania do rozmowy kwalifikacyjnej Scrum Master w 2022 r.	Jak rozpocząć karierę w cyberbezpieczeństwie w 2022 roku?	Opcje kariery w USA dla studentów inżynierii

• ngAfterViewChecked: — ten cykl życia jest wywoływany, gdy Angular zakończy wykrywanie lub sprawdzanie widoku komponentu lub komponentu podrzędnego. Mimo że metoda ngAfterViewChecked jest wywoływana po metodzie ngAfterViewInit, jest wykonywana po każdym kolejnym etapie cyklu życia ngAfterContentChecked(). Ta metoda haka dotyczy tylko komponentów kątowych .
  
• ngOnDestroy: — Metoda przechwytująca ngOnDestroy() jest wykonywana, zanim Angular zniszczy komponenty, które nie są już potrzebne. Ta metoda cyklu życia odłącza zdarzenia i pomaga uniknąć wycieków pamięci. Anuluje również subskrypcję obserwowalnych. To zdarzenie wywołujemy tylko raz przed usunięciem komponentu. Ta metoda haka służy jako czyszczenie, zanim Angular zniszczy komponent.

Interfejsy w Angular Lifecycle

Cykle życia kątowego są zwykle definiowane przez klasę komponentu. Jednak interfejsy mogą być również używane do definiowania klasy komponentu Angular, ponieważ różne metody przechwytujące mają już skojarzony interfejs Typescript. Interfejs zazwyczaj rozumiemy jako cechę, która pomaga zidentyfikować różne metody i powiązane właściwości. Mimo że nie jest to konieczne, zdecydowanie zaleca się implementację interfejsów w cyklu życia Angulara. Celem każdego interfejsu jest zdefiniowanie prototypu metod przechwytujących. Interfejsy są nazywane z przedrostkiem 'ng'.

Wniosek

Komponenty kątowe oparte są na programowaniu maszynopisowym. Dlatego przed wdrożeniem metod kątowego przechwycenia cyklu życia konieczne jest poznanie podstaw programowania maszynopisu. Niezbędne jest również poznanie podstaw projektowania aplikacji Angular, procesów związanych z metodami cyklu życia oraz wiedzy na temat tego, które metody przechwytujące mają być używane.

Jeśli planujesz karierę w tworzeniu aplikacji Angular, musisz mieć dogłębną wiedzę na temat całego procesu i funkcji różnych metod hook. Ponadto, ponieważ Angular jest frameworkiem programistycznym javascript, musisz nauczyć się języka programowania Java. Program Executive PG UpGrad w tworzeniu oprogramowania to doskonała opcja, aby dowiedzieć się od podstaw o tworzeniu aplikacji Angular.