Gyermek komponensek az Angular-ban

Ahogyan azt az oktatóanyag legelején említettük, az Angular-ban az egész projekt komponensekre van bontva. Az előző leckékben csak az alapértelmezettként létrehozott fő komponenssel dolgoztunk. Most pedig tanuljuk meg, hogyan készíthetünk gyermek komponenseket.

Az új komponensek kódját az Angular automatikusan generálja egy speciális terminálparanccsal: generate component. A component szó után kell írnunk az új komponensünk nevét. Tegyük fel, hogy egy user komponenst szeretnénk generálni:

ng generate component user

A parancs végrehajtása után látni fogjuk, hogy egy új mappa jött létre: app/user. Ebben lesznek a komponens összes alapértelmezett fájljai.

A user.component.ts komponensfájlban automatikusan létrejön a komponens dekorátora:

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

Ezen kívül ebben a fájlban automatikusan létrejön a komponens osztálya is:

export class UserComponent {

}

Most a gyermek komponensünket csatlakoztatnunk kell a szülőhöz. Legyen a szülő a app komponens, amely alapból megtalálható a keretrendszer telepítésekor. Importáljuk bele a mi komponensünket:

import { UserComponent } from './user/user.component';

A komponens dekorátorában a imports kulcsnál adjuk meg az importált komponensünket:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // itt
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Most már megjeleníthetjük a gyermek komponens tartalmát a szülőben. Ehhez a szülő template fájljába kell írnunk egy speciális tag-et, melynek a nevét a selector tulajdonság határozza meg a @Component dekorátorban. Esetünkben ez a app-user tag. Írjuk be a szülő template-jébe:

némi szöveg
<app-user></app-user>

Generálj egy ProductComponent komponenst. Kapcsold ezt a komponenst a projekt fő komponenséhez.

Végezz módosításokat a gyermek komponens template-jében. Győződj meg róla, hogy ezek alkalmazva lettek a böngészőben.

Változtasd meg a gyermek komponens CSS stílusait. Győződj meg róla, hogy ezek alkalmazva lettek a böngészőben.

A gyermek komponensben készíts name és price tulajdonságokat. Jelenítsd meg azok értékeit a gyermek komponens template-jében.