Angular компонентінің класы бар файл

Кез келген компоненттің негізгі бөлігі - оның функционалы, яғни оның өз бағдарламасы. Angular-да компоненттің функционалы TypeScript тілінде жазылады және ООП класын білдіреді.

Әрбір компонентте бұл класс .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 файлын ашыңыз және оны зерттеңіз.

Бірнеше стиль файлдарын жасап, оларды декораторда қосыңыз.