Podrejeni komponenti v Angular

Kot smo omenili na samem začetku vadnice, je v Angularju celoten projekt razdeljen na komponente. V prejšnjih lekcijah smo delali samo z glavno komponento, ki je bila ustvarjena privzeto. Zdaj pa se naučimo ustvarjati podrejene komponente.

Koda novih komponent je samodejno generirana s strani Angularja s posebnim ukazom v terminalu: generate component. Za besedo component je treba napisati ime naše nove komponente. Recimo, da želimo generirati komponento user:

ng generate component user

Po izvedbi ukaza bomo videli, da se je pojavila nova mapa app/user. V njej bodo vse standardne datoteke komponente.

V datoteki s komponento user.component.ts bo samodejno ustvarjen dekorator komponente:

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

Prav tako bo v tej datoteki samodejno ustvarjen razred komponente:

export class UserComponent {

}

Zdaj moramo našo podrejeno komponento povezati s starševsko. Naj bo starševska komponenta app, ki je prvotno prisotna ob namestitvi ogrodja. Uvozimo jo vanjo:

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

V dekoratorju komponente v ključu imports navedemo našo uvoženo komponento:

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

Zdaj lahko izpišemo vsebino podrejene komponente v starševski. Za to v datoteki s predlogo starša napišemo posebno oznako, katere ime je določeno v lastnosti selector dekoratorja @Component potomca. V našem primeru je to oznaka app-user. Zapišimo jo v predlogo starša:

nekaj besedila
<app-user></app-user>

Ustvarite komponento ProductComponent. Povežite to komponento z glavno komponento vašega projekta.

Spremenite predlogo podrejene komponente. Prepričajte se, da so spremembe uporabljene v brskalniku.

Spremenite CSS sloge podrejene komponente. Prepričajte se, da so uporabljeni v brskalniku.

V podrejeni komponenti ustvarite lastnosti name in price. Izpišite njihove vrednosti v predlogi podrejene komponente.