Lêer met komponentklas in Angular

Die hoofdeel van enige komponent is sy funksionaliteit, dit wil sê sy program. In Angular word die komponent se funksionaliteit in die TypeScript-taal geskryf en verteenwoordig dit 'n OOP-klas.

In elke komponent is hierdie klas geleë in 'n lêer met die uitbreiding .ts. In ons hoofkomponent sal dit die lêer app.component.ts wees.

Kom ons maak kennis met die inhoud van hierdie lêer. Let eerstens op die klas van ons komponent:

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

Op hierdie klas word die dekorateur @Component toegepas. Hierdie dekorateur neem sy parameter as 'n objek wat ons komponent konfigureer:

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

In die eienskap templateUrl word die pad na die lêer wat die opmaak van ons komponent bevat, gestel.

In die eienskap styleUrls word die skikking van paaie na CSS-lêers gestel, wat die opmaak van ons komponent stiliseer. Soos jy kan sien, kan daar meer as een stylêer wees.

In die eienskap selector word die selekteerder van die HTML-tag, waarin die (gemonteerde) HTML-kode van ons komponent uitgevoer sal word, gestel. In ons geval sien ons die naam app-root. Hierdie naam kom ooreen met 'n tag met dieselfde naam. Hierdie tag is geskryf in die lêer src/index.html. Op die plek waar hierdie tag geskryf is, sal die opmaak van ons komponent ingevoeg word.

In die eienskap imports word die modules, wat in ons komponent ingevoer word, aangedui.

In die eienskap standalone sal altyd die waarde true aangedui word. Tans is dit eerder 'n diensding van Angular, so moenie vir nou daarop ingaan nie.

Maak die lêer app.component.ts oop en bestudeer dit.

Maak 'n paar lêers met style en koppel dit in die dekorateur aan.