Angular komponent klass fayli

Har qanday komponentning asosiy qismi uning funktsionaliti, ya'ni uning o'zi dasturidir. Angularda komponent funktsionaliti TypeScript tilida yoziladi va u OOP klass ni tashkil qiladi.

Har bir komponentda bu klass .ts kengaytmali faylda joylashgan. Bizning asosiy komponentimizda bu fayl app.component.ts bo'ladi.

Keling, ushbu fayl tarkibi bilan tanishaylik. Boshlash uchun komponentimiz klassiga e'tibor bering:

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

Ushbu klassga @Component dekoratori qo'llaniladi. Ushbu dekorator o'z parametri sifatida komponentimizni konfiguratsiya qiluvchi ob'ektni qabul qiladi:

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

templateUrl xususiyatida komponentimizning vyerstkasini o'z ichiga olgan faylga yo'l belgilangan.

styleUrls xususiyatida komponentimiz vyerstkasiga uslub beradigan CSS fayllariga yo'llar massivi belgilangan. Ko'rib turganingizdek, uslub fayllari bir nechta bo'lishi mumkin.

selector xususiyatida komponentimizning HTML kodi chiqadigan (montaj qilinadigan) HTML tegi selektori belgilangan. Bizning holatda biz app-root nomi ko'ramiz. Ushbu nomga mos keladigan teg shu nomdagi tegdir. Ushbu teg src/index.html maket faylida yozilgan. Ushbu teg yozilgan joyga komponentimiz vyerstkasi joylashtiriladi.

imports xususiyatida komponentimizga import qilinadigan modullar ko'rsatilgan.

standalone xususiyatida har doim true qiymati ko'rsatiladi. Hozirda bu Angular ning xizmat ko'rsatish jihozi, shuning uchun hozircha unga chuqur kirmang.

app.component.ts faylini oching va uni o'rganing.

Bir nechta uslub fayllari yarating va ularni dekoratorda ulang.