Cykl życia komponentów kątowych: metody, różne typy i interfejs

Wstęp

Platforma po stronie klienta, która pozwala na budowanie aplikacji zarówno webowych, jak i mobilnych, jest angularna. Został wprowadzony w 2009 roku przez Google. Początkowo platforma obsługiwała JavaScript i HTML, które zostały zastąpione przez Angular TypeScript i inne języki skryptowe.

Wiele wersji Angulara zostało opracowanych za pomocą AngularJS do Angular-7 i tak dalej. Niezależnie od wersji, kątownik jest generalnie zbudowany z komponentów. Dlatego zrozumienie komponentów jest ważne dla uzyskania jasnego zrozumienia przetwarzania komponentów.

Jednak każdy element kątowy ma określony styl życia, w którym każdy etap cyklu życia kątowego przechodzi przez etapy inicjalizacji do etapów niszczenia.

Artykuł skupi się na wydarzeniach z cyklu życia różnych składników kątowych.

Metody cyklu życia

Komponenty w ramach kątownika mają różny cykl życia i określoną liczbę etapów, przez które przebiega proces od inicjalizacji do zniszczenia. Poszczególne etapy komponentów są określane jako „zdarzenie haka cyklu życia”.

Do kontrolowania komponentów w angular programiści mogą używać zdarzeń podpięcia w różnych fazach aplikacji. Dostępnych jest osiem typów zdarzeń haka cyklu życia, które programiści mogą wykorzystać w dowolnym komponencie kąta. Programista musi dodać wywołanie funkcji odpowiadające określonemu zdarzeniu cyklu życia.

Metoda konstruktora musi być obecna dla każdego komponentu, ponieważ komponenty należą do klasy maszynopisu. Jest to zawsze konstruktor klasy komponentu, który jest wykonywany jako pierwszy przed wykonaniem dowolnego z kątowych zaczepów cyklu życia . Do dodawania dowolnych zależności można użyć konstruktora do wymaganego zadania. Kątowe haki cyklu życia są wykonywane w określonej kolejności.

Ilekroć następuje inicjalizacja dowolnego komponentu w angular, tworzone i prezentowane są komponenty główne. Następnie produkowany jest spadkobierca komponentów.

Podział etapów cyklu życia odbywa się na dwie fazy: fazę, która łączy się z komponentem i drugą, która łączy się z elementami potomnymi komponentu.

Przeczytaj także: Ekscytujące pomysły na projekty Angular

Różne typy haka cyklu życia

1. ngOnChanges –

To zdarzenie jest wywoływane za każdym razem, gdy następuje zmiana wartości kontroli wejścia. Zmiana wartości powiązanej właściwości wyzwala to zdarzenie. Mapa danych zawierająca zmiany, tj. poprzednia i aktualna wartość właściwości w ramach SimpleChange.

• Nieruchomości
  • Komponenty posiadające dane wejściowe mogą korzystać z tej metody.
  • Za każdym razem, gdy nastąpi zmiana wartości danych wejściowych, wywoływana jest metoda.

2. ngOnInit

Po zainicjowaniu składnika lub wyświetleniu właściwości powiązanych danych inicjowane jest zdarzenie ngOnInit. Zdarzenie jest wywoływane tylko raz po zdarzeniu ngOnChanges. Dlatego zdarzenie jest głównie odpowiedzialne za inicjalizację danych komponentów.

• Nieruchomości
  • Dane w komponencie są inicjowane przez to zdarzenie.
  • Metoda jest wywoływana, gdy ustawione są wartości danych wejściowych.
  • Angular CLI domyślnie dodał ten zaczep do wszystkich swoich komponentów.
  • Metodę można wywołać tylko raz.

3. ngDoCheck

Po sprawdzeniu właściwości wejściowych komponentów kątowych następuje wyzwolenie zdarzenia ngDoCheck. Odbywa się to głównie w celu wykrycia lub działania na wszelkie zmiany, których kąt nie jest w stanie wykryć. W oparciu o logikę dewelopera sprawdzenie może zostać zaimplementowane. W związku z tym zdarzenie umożliwia wdrożenie dowolnej niestandardowej logiki zmiany lub algorytmów do wykrywania zmian w dowolnych komponentach.

• Nieruchomości
  • W celu wykrycia zmian kątowych przebiega ta metoda.
  • Metoda jest wywoływana w celu wykrywania zmian.

4. ngAfterContentInit –

Po projekcji zawartości zewnętrznej w widoku komponentu wywoływane jest zdarzenie ngAfterContentInit. Aby sprawdzić wszystkie powiązania komponentów po raz pierwszy, ta metoda jest wykonywana po raz pierwszy. Jego wykonanie następuje zaraz po wykonaniu metody ngDoCheck(). Komponent potomny jest zwykle połączony z tą metodą.

• Nieruchomości
• • Początkowo metoda jest wywoływana po ngDoCheck.

• • Praca odbywa się poprzez inicjalizację treści.

5. ngPo sprawdzeniu treści –

Po projekcji zawartości zewnętrznej na komponent następuje sprawdzenie zawartości rzutowanej. Metoda wywoływana jest każdorazowo przy sprawdzaniu zawartości poprzez mechanizm wykrywania zmian kątowych. Jest wykonywany po wykonaniu metody ngAfterContentInit(). Ponadto metoda jest wykonywana po kolejnym wykonaniu ngDoCheck(). Zwykle wiąże się to z inicjalizacją komponentów potomnych.

• Nieruchomości

• • Aby rozpocząć, metoda czeka na zakończenie ngContentInit.

• • Wykonanie odbywa się po ngDocheck.

6. ngAfterViewInit

Podczas inicjalizacji komponentów kątowych i komponentów podrzędnych wywoływana jest metoda ngAfterViewInit. Po wykonaniu metody ngAfterContentChecked po raz pierwszy wywoływana jest metoda ngAfterViewInit. Metoda ma zastosowanie tylko do elementów kątowych.

• Nieruchomości

  • Tylko raz wywołanie metody jest generowane po zainicjowaniu widoku składnika.

7. ngAfterViewChecked –

Zaraz po metodzie ngAfterViewInit wywoływana jest metoda ngAfterViewChecked. Za każdym razem, gdy metoda wykrywania zmian angular sprawdza komponenty, wykonywana jest metoda ngAfterViewChecked. Metoda jest również wykonywana po wykonaniu ngAfterContentChecked(). Ponadto, gdy wiązanie dyrektyw komponentu potomnego zostanie zmienione, metoda zostanie wykonana.

• Nieruchomości

• • Wywołanie jest generowane po zainicjowaniu i sprawdzeniu.

• • Praca metody rozpoczyna się po zakończeniu każdej metody ngDocheck.

8. ngOnDestroy

Metoda wywoływana jest tuż przed zniszczeniem elementów metodą kątową. Aby uniknąć scenariuszy wycieków pamięci, metoda jest w stanie odłączyć programy obsługi zdarzeń, a także jest przydatna w anulowaniu subskrypcji obserwowalnych. Tylko raz metoda jest wywoływana w celu usunięcia komponentu z DOM.

• Nieruchomości

• • Wywołanie jest generowane tuż przed usunięciem komponentów z DOM.

Interfejsy w Angular Lifecycle

Klasa komponentów może służyć do definiowania metod kątowych hooków cyklu życia . Jednak za pomocą interfejsów można wywoływać metody. Nazwy interfejsów są podobne do nazw metod, z pominięciem przedrostka „ng”. Wynika to z obecności interfejsu maszynopisu z każdą z metod zaczepów cyklu życia. Na przykład interfejs ngOnInit nazywa się OnInit. Tylko jedno zdarzenie haka cyklu życia jest definiowane przez pojedynczy interfejs. Ponadto kompilator nie zgłasza żadnego błędu kompilacji, gdy interfejsy nie są zaimplementowane.

Przykład:

Pokazano przykład implementacji haka cyklu życia. Poniższy kod należy umieścić w pliku 'app.component.ts'. Źródło

Pokazuje, jak wywołać hak cyklu życia ngOnInit.

Przykład dodania modułu do repozytorium 'ng-example' pokazano poniżej. Nazwa modułu to lifecycle-hooks, który zawiera komponenty (zarówno nadrzędne, jak i podrzędne) dla przykładu 'ngOnChanges' zwanego change-example. W przypadku trasowania do haków cyklu życia komponentu trasowanie jest dodawane do paska bocznego, a komponent „przykład zmian” jest umieszczany wewnątrz tego komponentu. To pokazuje komponent nadrzędny wraz z komponentem podrzędnym.

Wszystkie metody zaczepów cyklu życia zostaną dodane do obu komponentów wraz z nazwą zaczepu zdarzenia o nazwie console.log(). Element podrzędny jest dodawany do instrukcji konsoli podrzędnej w celu rozróżnienia komponentów nadrzędnych i podrzędnych.

Wygląd komponentu nadrzędnego pokazano poniżej.

Źródło

Komponent potomny jest identyczny, ale jest częścią instrukcji pliku console.log.

Przebieg serwu pokaże kolejność odpalania wydarzeń. Opisuje kolejność wykonywanych metod. Inicjalizacja komponentu, jego zawartość, sprawdzanie zawartości, inicjalizacja i sprawdzanie komponentu potomnego. Następnie następuje ostateczna deklaracja, że ​​widok komponentu jest inicjowany i sprawdzany.

Przeczytaj także: Jak uruchomić projekt Angular

W następnym kroku komponent nadrzędny jest dodawany z prostym zdarzeniem, w którym manipulowana jest pewna wartość danych wejściowych dla dziecka. W tym celu do komponentu nadrzędnego dodawany jest przycisk, który po kliknięciu zwiększy liczbę o wartość jeden. Przyrost zostanie przekazany dziecku jako dane wejściowe i zostanie wyświetlony.

Źródło

Wygląd nadrzędnego html to

Wejście 'num' jest wyświetlane jako:

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

Po kliknięciu przycisku „+” nastąpi uruchomienie zdarzenia, w którym zdarzenia z hooków cyklu życia zostaną wykonane nad komponentami. Zdarzenie „ngOnChanges” jest wyzwalane w podrzędnym, ponieważ wartość wejściowa do dziecka jest wykrywana przez „ngOnChanges”.

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

Wniosek

Artykuł zawierał przegląd etapów składowych kątowych. Omówiono konkretną kolejność, w jakiej przebiegają kątowe haki cyklu życia , a także pokazano zastosowanie takich zdarzeń.

Aby poszerzyć zastosowanie takich komponentów oprogramowania, możesz zapoznać się z kursem upGrad , „ Program Executive PG w rozwoju oprogramowania – specjalizacja w rozwoju pełnego stosu ”. Każdy profesjonalista średniego szczebla w wieku od 21 do 45 lat może dołączyć do kursu certyfikowanego przez IIIT-Bangalore . Kurs online oferuje korzyści płynące z wykładów na żywo, praktycznych doświadczeń, statusu absolwentów IIIT-B oraz bezpłatnego 4-miesięcznego certyfikatu z zakresu Data Science i uczenia maszynowego. Jeśli nadal dążysz do zdobycia wymarzonej pracy, przejdź kurs, który zapewnia staże w najlepszych branżach. Wszelkie zapytania są mile widziane przez nasz zespół.