Файли синфи компонент дар 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-ро кушоед ва онро омӯзед.

Чанд файли услуберо созед ва онҳоро дар декоратор пайваст кунед.