Angulari komponendi klassifail

Iga komponendi põhiosa on selle funktsionaalsus, ehk tegelikult selle programm. Angularis kirjutatakse komponendi funktsionaalsus TypeScripti keeles ja see esindab OOP klassi.

Igas komponendis asub see klass failis laiendiga .ts. Meie põhikomponendis on see fail app.component.ts.

Tutvume selle faili sisuga. Kõigepealt pöörake tähelepanu meie komponendi klassile:

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

Sellele klassile rakendatakse dekoratiivi @Component. See dekoratuur võtab oma parameetrina objekti, mis konfigureerib meie komponendi:

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

Omaduses templateUrl on määratud tee failini, mis sisaldab meie komponendi HTML-i.

Omaduses styleUrls on määratud massiiv tee-dega CSS-failidele, mis stiilivad meie komponendi HTML-i. Nagu näete, võib stiilifail olla mitte ainult üks.

Omaduses selector on määratud valija HTML-sildi jaoks, kuhu see kuvatakse (monteeritakse) meie komponendi HTML-kood. Meie puhul näeme nime app-root. Sellele nimele vastab samanimeline silt. See silt on kirjutatud faili makett src/index.html. Sinna kohta, kuhu see silt on kirjutatud, ja see sisestatakse meie komponendi HTML.

Omaduses imports on märgitud moodulid, mida imporditakse meie komponenti.

Omaduses standalone on alati määratud väärtus true. Praegu on see enam-vähem Angulari teeninduslik asi, seega ärge veel sellega süvene.

Avage fail app.component.ts ja uurige seda.

Looge mitu stiilifaili ja ühendage need dekoratuuris.