Angular komponentiniň klass faýly

Her bir komponentiň esasy bölegi onuň funksionalligydyr, ýagny onuň öz programmasydyr. Angularda komponentiň funksionalligi TypeScript dilinde ýazylýar we OOP klassy hökmünde çykyş edýär.

Her komponentde bu klas .ts giňeltmeli faýlda ýerleşýär. Bizim esasy komponentimizde bu app.component.ts faýly bolar.

Geliň bu faýlyň mazmuny bilen tanyşalyň. Ilki bilen komponentimiziň klasyna üns beriň:

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

Bu klasa @Component dekoratory ulanylýar. Bu dekorator parametri hökmünde komponentimizi konfigurirlýän obýekti kabul edýär:

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

templateUrl aýratynlygynda komponentimiziň werstkasyny öz içine alýan faýlyň ýoly kesgitlenýär.

styleUrls aýratynlygynda komponentimiziň werstkasyny stilize edýän CSS faýllarynyň ýollarynyň sanawy kesgitlenýär. Görşüňiz ýaly, stil faýly bir bolup bilmeýär.

selector aýratynlygynda komponentimiziň HTML kodynyň (montirlener) çykaryljak HTML tegiň selektory kesgitlenýär. Bizim ýagdaýymyzda biz app-root atyny görýäris. Bu at şol atdaky tege gabat gelýär. Bu teg src/index.html maket faýlynda ýazylan. Bu tegiň ýazylan ýerine komponentimiziň werstkasy goşular.

imports aýratynlygynda komponentimize importirlenýän modullary görkezilýär.

standalone aýratynlygynda hemişe true bahasy görkeziler. Häzirki wagtda bu Angularyň gullukçy zady, şonuň üçin häzirçe ony düşünmäge synanşmaň.

app.component.ts faýlyny açyň we ony öwreniň.

Birnäçe stil faýlyny düzüň we olary dekoratorda birikdiriň.