Файл с классом компонента в 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
и изучите его.
Сделайте несколько файлов со стилями и подключите их в декораторе.