Podradené komponenty v Angular

Ako bolo spomenuté na samom začiatku tutoriálu, v Angulari je celý projekt rozdelený na komponenty. V predchádzajúcich lekciách sme pracovali iba s hlavným komponentom vytvoreným štandardne. Poďme sa teraz naučiť vytvárať podradené komponenty.

Kód nových komponentov je automaticky generovaný Angularom pomocou špeciálneho príkazu terminálu: generate component. Po slove component je potrebné napísať názov nášho nového komponentu. Povedzme, že chceme vygenerovať komponent user:

ng generate component user

Po vykonaní príkazu uvidíme, že sa nám vytvoril nový priečinok app/user. V ňom sa budú nachádzať všetky štandardné súbory komponentu.

V súbore s komponentom user.component.ts bude automaticky vytvorený dekorátor komponentu:

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

Tiež v tomto súbore bude automaticky vytvorená trieda komponentu:

export class UserComponent {

}

Teraz je potrebné náš podradený komponent pripojiť k nadradenému. Nech nadradeným je komponent app, pôvodne prítomný pri inštalácii frameworku. Importujme do neho náš komponent:

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

V dekorátori komponentu v kľúči imports uvádzame náš importovaný komponent:

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

Teraz môžeme zobraziť obsah podradeného komponentu v nadradenom. Na to je potrebné v súbore s templateom nadradeného komponentu napísať špeciálny tag, ktorého názov je daný v vlastnosti selector dekorátora @Component podradeného komponentu. V našom prípade je to tag app-user. Napíšme ho v template nadradeného komponentu:

some text
<app-user></app-user>

Vygenerujte komponent ProductComponent. Pripojte tento komponent k hlavnému komponentu vášho projektu.

Vykonajte zmeny v template podradeného komponentu. Uistite sa, že sa aplikujú v prehliadači.

Zmeňte CSS štýly podradeného komponentu. Uistite sa, že sa aplikujú v prehliadači.

V podradenom komponente vytvorte vlastnosti name a price. Zobrazte ich hodnoty v template podradeného komponentu.