Angular Academy · Lekcja

ngOnInit i inicjalizacja

Uruchamiaj logikę konfiguracji podczas inicjalizacji komponentu.

ngOnInit i inicjalizacja to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Czym są haki cyklu życia?

Komponenty Angulara mają zarządzany przez framework cykl życia, obejmujący tworzenie, wykrywanie zmian, renderowanie i niszczenie. Haki cyklu życia pozwalają uruchamiać kod w określonych momentach.

Wprowadzenie do OnInit

Hak OnInit uruchamia się raz, po ustawieniu przez Angular właściwości wejściowych komponentu i wyrenderowaniu widoku początkowego. Jest standardowym miejscem na logikę inicjalizacyjną.

Implementowanie OnInit

Zaimplementuj interfejs OnInit i dodaj metodę ngOnInit. Angular wywoła ją automatycznie.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Konstruktor a ngOnInit

Konstruktor uruchamia się jako pierwszy, zanim zostaną ustawione dane wejściowe, i powinien służyć wyłącznie do lekkiego wstrzykiwania zależności. Używaj ngOnInit do właściwej konfiguracji, gdy dane wejściowe są już dostępne.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Dane wejściowe są gotowe w ngOnInit

W chwili uruchomienia ngOnInit wszystkie właściwości @Input mają początkowe wartości powiązane z komponentu nadrzędnego.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Pobieranie danych w ngOnInit

Typowym rozwiązaniem jest wczytywanie danych z usługi w metodzie ngOnInit, ponieważ ma się wtedy dostęp do danych wejściowych i zależności.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit uruchamia się raz

W przeciwieństwie do haków wykrywania zmian metoda ngOnInit uruchamia się dokładnie raz w cyklu życia komponentu, zaraz po pierwszym ngOnChanges.

Kolejność względem ngOnChanges

Jeśli komponent ma dane wejściowe, ngOnChanges uruchamia się jako pierwszy z początkowymi wartościami, a następnie działa ngOnInit. Bez danych wejściowych ngOnInit również się uruchomi.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Inicjowanie formularzy

Tworzenie formularzy reaktywnych jest klasycznym zadaniem dla ngOnInit, ponieważ do skonfigurowania formularza mogą być potrzebne wstrzyknięte usługi.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Lekkie konstruktory

Unikaj wykonywania złożonych operacji w konstruktorze. Uruchamia się on przed podłączeniem danych wejściowych przez Angulara, a umieszczone w nim efekty uboczne utrudniają testowanie i przewidywanie działania komponentów.

Inicjalizacja asynchroniczna

Możesz wywoływać logikę asynchroniczną z poziomu ngOnInit, ale sama metoda zwraca void; w jej wnętrzu użyj subskrypcji lub wzorców asynchronicznych.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat OnInit.

Podsumowanie

Hak OnInit wraz z metodą ngOnInit uruchamia się raz po powiązaniu danych wejściowych i jest idealnym miejscem na pobieranie danych oraz konfigurację formularzy. Konstruktor powinien pozostać lekki, a inicjalizację należy umieszczać w ngOnInit.

Często zadawane pytania

Czy lekcja „ngOnInit i inicjalizacja” jest bezpłatna?

Tak — pełny tekst „ngOnInit i inicjalizacja” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „ngOnInit i inicjalizacja”?

Uruchamiaj logikę konfiguracji podczas inicjalizacji komponentu. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „ngOnInit i inicjalizacja”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy