Angular կոմպոնենտի դասի ֆայլը

Ցանկացած կոմպոնենտի հիմնական մասը նրա ֆունկցիոնալն է, այսինքն՝ հենց իր ծրագիրն է: Angular-ում կոմպոնենտի ֆունկցիոնալը գրվում է TypeScript լեզվով և ներկայացնում է OOP դաս:

Յուրաքանչյուր կոմպոնենտում այս դասը տեղակայված է .ts ընդլայնմամբ ֆայլում: Մեր հիմնական կոմպոնենտում դա կլինի app.component.ts ֆայլը:

Եկեք ծանոթանանք այս ֆայլի պարունակությանը: Սկսելու համար ուշադրություն դարձրեք մեր կոմպոնենտի դասին:

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

Այս դասին կիրառվում է @Component դեկորատորը: Այս դեկորատորը իր պարամետրով ընդունում է օբյեկտ, որը կոնֆիգուրացնում է մեր կոմպոնենտը:

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

templateUrl հատկության մեջ նշված է ճանապարհը դեպի ֆայլ, որը պարունակում է մեր կոմպոնենտի վերստը:

styleUrls հատկության մեջ նշված է CSS ֆայլերի ճանապարհների զանգված, որոնք ոճավորում են վերստը մեր կոմպոնենտի: Ինչպես տեսնում եք, ոճերի ֆայլը կարող է մեկից ավելի լինել:

selector հատկության մեջ նշված է HTML թեգի սելեկտորը, որի մեջ կարտացոլվի (մոնտաժվի) մեր կոմպոնենտի HTML կոդը: Մեր դեպքում մենք տեսնում ենք app-root անունը: Այս անվանը համապատասխանում է նույնանուն թեգը: Այս թեգը գրված է src/index.html մակետի ֆայլում: Այն տեղում, որտեղ գրված է այս թեգը, և կտեղադրվի մեր կոմպոնենտի վերստը:

imports հատկության մեջ նշված են մոդուլները, որոնք իմպորտվում են մեր կոմպոնենտ:

standalone հատկության մեջ միշտ կլինի նշված true արժեքը: Այժմ դա ավելի շատ Angular-ի սպասարկման հատկանիշ է, ուստի առայժմ մի խորանաք դրանում:

Բացեք app.component.ts ֆայլը և ուսումնասիրեք այն:

Ստեղծեք մի քանի ֆայլ ոճերով և միացրեք դրանք դեկորատորում: