Lapsekomponendid Angularis

Nagu õpiku alguses mainitud, Angularis jagatakse kogu projekt komponentideks. Eelmistes tundides töötasime ainult vaikimisi loodud põhikomponendiga. Õpime nüüd looma lapsekomponente.

Uute komponentide kood genereeritakse automaatselt Angulari poolt spetsiaalse terminaalkäsuga: generate component. Sõna component järel tuleb kirjutada meie uue komponendi nimi. Oletame, et soovime genereerida komponendi user:

ng generate component user

Pärast käsu täitmist näeme, et meil on ilmunud uus kaust app/user. Selles asuvad kõik komponendi standardsed failid.

Komponendi failis user.component.ts luuakse automaatselt komponendi dekoraator:

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

Samuti luuakse selles failis automaatselt komponendi klass:

export class UserComponent {

}

Nüüd tuleb meie lapsekomponent ühendada vanemkomponendiga. Olgu vanemkomponendiks app, mis on raamistuki paigaldamisel vaikimisi olemas. Impordime selle meie komponendi:

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

Komponendi dekoraatoris võtmes imports märgime meie imporditud komponendi:

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

Nüüd saame kuvada lapsekomponendi sisu vanemkomponendis. Selleks tuleb vanema failis templi sees kirjutada spetsiaalne silt, mille nimi on määratud lapse dekoraatori @Component omaduses selector. Meie puhul on see silt app-user. Kirjutame selle vanema templi:

mõni tekst
<app-user></app-user>

Genereerige komponent ProductComponent. Ühendage see komponent teie projekti peamise komponendiga.

Tehke muudatused lapsekomponendi templis. Veenduge, et need rakenduvad brauseris.

Muutke lapsekomponendi CSS stiile. Veenduge, et need rakenduvad brauseris.

Lapsekomponendis tehke omadused name ja price. Kuvage nende väärtused lapsekomponendi templis.