Angular-da Komponent Klassi Faylı

İstənilən komponentin əsas hissəsi onun funksionallığı, yəni öz proqramıdır. Angular-da komponentin funksionallığı TypeScript dilində yazılır və OOP sinfi kimi təqdim olunur.

Hər komponentdə bu sinif .ts genişlənməsi olan faylda yerləşir. Bizim əsas komponentimizdə bu app.component.ts faylı olacaq.

Gəlin bu faylın məzmunu ilə tanış olaq. Əvvəlcə komponentimizin sinfinə diqqət yetirin:

export class AppComponent {
	title: string = 'test';
}

Bu sinif @Component dekoratoruna məruz qalır. Bu dekorator parametr kimi komponentimizi konfiqurasiya edən obyekt qəbul edir:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

templateUrl xüsusiyyətində komponentimizin vərstqasını ehtiva edən faylın yolu təyin edilib.

styleUrls xüsusiyyətində komponentimizin vərstqasını stilizə edən CSS fayllarının yolları massivi təyin edilib. Gördüyünüz kimi, stil faylı bir neçə ola bilər.

selector xüsusiyyətində komponentimizin HTML kodunun çıxarılacağı (quraşdırılacaq) HTML teqinin selektoru təyin edilib. Bizim vəziyyətimizdə app-root adını görürük. Bu ada uyğun gələn eyniadlı teq var. Bu teq src/index.html maket faylında yazılıb. Bu teqin yazıldığı yerə komponentimizin vərstqası daxil ediləcək.

imports xüsusiyyətində komponentimizə daxil edilən modullar göstərilib.

standalone xüsusiyyətində həmişə true dəyəri göstəriləcək. Hal-hazırda bu, Angular-ın xidməti xüsusiyyətidir, ona görə də hələlik ona mənalandırmağa çalışmayın.

app.component.ts faylını açın və onu öyrənin.

Bir neçə stil faylı yaradın və onları dekoratorda qoşun.