Vaikiniai komponentai Angular

Kaip buvo minėta pačioje vadovėlio pradžioje, Angular visas projektas yra suskirstytas į komponentus. Ankstesnėse pamokose dirbome tik su pagrindiniu komponentu, sukurtu pagal numatytuosius nustatymus. Dabar išmoksime kurti vaikinius komponentus.

Naujų komponentų kodas automatiškai generuojamas Angular naudojant specialią terminalo komandą: generate component. Po žodžio component reikia parašyti mūsų naujo komponento pavadinimą. Tarkime, mes norime sugeneruoti komponentą user:

ng generate component user

Vykdžius komandą pamatysime, kad mums atsirado naujas aplankas app/user. Jame bus visi standartiniai komponento failai.

Komponento faile user.component.ts bus automatiškai sukurtas komponento dekoratorius:

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

Taip pat šiame faile bus automatiškai sukurtas komponento klasė:

export class UserComponent {

}

Dabar mūsų vaikinis komponentas turi būti prijungtas prie pagrindinio. Tegul pagrindinis yra komponentas app, iš pradžių esantis įdiegus karkasą. Importuokime į jį mūsų komponentą:

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

Komponento dekoratoriuje rakto imports reikšmėje nurodykime mūsų importuotą komponentą:

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

Dabar galime atvaizduoti vaikinio komponento turinį pagrindiniame komponente. Tam pagrindinio komponento šablono faile reikia parašyti specialią žymę, kurios pavadinimas nustatytas savybėje selector dekoratoriaus @Component vaikinio komponento. Mūsų atveju tai žymė app-user. Parašykime ją pagrindinio komponento šablone:

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

Sugeneruokite komponentą ProductComponent. Prijunkite šį komponentą prie pagrindinio projekto komponento.

Atlikite pakeitimus vaikinio komponento šablone. Įsitikinkite, kad jie pasireiškia naršyklėje.

Pakeiskite vaikinio komponento CSS stilius. Įsitikinkite, kad jie pasireiškia naršyklėje.

Vaikiniame komponente sukurkite savybes name ir price. Atvaizduokite jų reikšmes vaikinio komponento šablone.