A komponens osztályfájlja az Angular-ban

Bármely komponens fő része a funkcionalitása, vagyis maga a programja. Az Angular-ban a komponens funkcionalitását a TypeScript nyelven írjuk, és ez egy OOP osztály.

Minden komponensben ez az osztály egy .ts kiterjesztésű fájlban található. A mi fő komponensünkben ez a app.component.ts fájl lesz.

Ismerkedjünk meg a fájl tartalmával. Először is figyeljünk a komponensünk osztályára:

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

Erre az osztályra egy @Component dekorátor vonatkozik. Ez a dekorátor egy paramétert vesz fel, ami egy objektum, és ez konfigurálja a komponensünket:

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

A templateUrl tulajdonságban meg van adva az elérési út ahhoz a fájlhoz, amely a komponensünk HTML kódját tartalmazza.

A styleUrls tulajdonságban egy tömb van megadva a CSS fájlok elérési útjaival, amelyek a komponensünk HTML kódját stilizálják. Amint látod, a stílusfájlok lehetnek többek is.

A selector tulajdonságban meg van adva annak az HTML elemnek a szelektora, amelybe a komponensünk HTML kódja kerül (mountolódik). A mi esetünkben a app-root nevet látjuk. Ehhez a névhez egy azonos nevű HTML elem tartozik. Ez az elem a src/index.html layout fájlban található. Pontosan oda, ahol ez az elem van, fog beillesztődni a komponensünk HTML kódja.

A imports tulajdonságban azok a modulok vannak megadva, amelyek importálásra kerülnek a komponensünkbe.

A standalone tulajdonságnál mindig a true érték lesz megadva. Jelenleg ez inkább az Angular egy szolgáltatási eleme, ezért egyelőre ne is foglalkozz vele.

Nyissa meg a app.component.ts fájlt és tanulmányozza azt.

Készítsen több stílusfájlt és kapcsolja be őket a dekorátorban.