Poznawanie komponentów Angulara

Komponenty są podstawowymi elementami aplikacji Angular. W tej lekcji poznają Państwo komponenty i ich cykl życia.

Czym jest komponent?

Komponent to element interfejsu użytkownika zawierający kod HTML, CSS i TypeScript. Reprezentuje część interfejsu użytkownika aplikacji.

Tworzenie komponentu

Za pomocą Angular CLI można łatwo utworzyć komponent:

ng generate component my-component

ng generate component my-component

Struktura komponentu

Komponent Angulara zazwyczaj składa się z czterech głównych plików:

• .html: szablon
• .ts: logika
• .css: style
• .spec.ts: testy

Dekorator komponentu

Dekorator @Component łączy klasę komponentu z jego szablonem i stylami.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Hooki cyklu życia

Komponenty Angulara mają hooki cyklu życia, które pozwalają uruchamiać kod w określonych momentach. Do często używanych hooków należą ngOnInit() i ngOnDestroy().

Używanie ngOnInit()

ngOnInit() jest wykonywana po zainicjowaniu przez Angular danych komponentu. Świetnie nadaje się do konfiguracji początkowej:

ngOnInit() {
  console.log('Component initialized!');
}

Wyświetlanie komponentów

Aby wyświetlić komponent, należy użyć jego selektora w innych szablonach:

<app-my-component></app-my-component>

Podsumowanie

Poznali Państwo komponenty, sposób ich tworzenia oraz ich hooki cyklu życia. Świetna praca!