Angular-komponentin luokatiedosto

Minkä tahansa komponentin perusosa on sen toiminnallisuus, eli itse asiassa sen ohjelma. Angularissa komponentin toiminnallisuus kirjoitetaan TypeScript-kielellä ja se on OOP-luokka.

Jokaisessa komponentissa tämä luokka sijaitsee tiedostossa, jonka tunniste on .ts. Pääkomponentissamme tämä on tiedosto app.component.ts.

Tutustutaanpa tämän tiedoston sisältöön. Kiinnitä ensin huomiota komponentimme luokkaan:

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

Tähän luokkaan sovelletaan decoratoria @Component. Tämä decoratori ottaa parametrinaan objektin, joka määrittää komponentimme:

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

Ominaisuudessa templateUrl asetetaan polku tiedostoon, joka sisältää komponentimme merkintäkielen.

Ominaisuudessa styleUrls asetetaan taulukko poluista CSS-tiedostoihin, jotka muotoilevat komponentimme merkintäkielen. Kuten näet, tyylitiedostoja voi olla useita.

Ominaisuudessa selector asetetaan valitsin HTML-tagille, johon komponentimme HTML-koodi tulostetaan (asennetaan). Meidän tapauksessamme näemme nimen app-root. Tähän nimeen vastaa samaniminen tagi. Tämä tagi on kirjoitettu mallitiedostoon src/index.html. Siihen paikkaan, minne tämä tagi on kirjoitettu, asennetaan komponentimme merkintäkieli.

Ominaisuudessa imports on lueteltu moduulit, jotka tuodaan komponenttiimme.

Ominaisuudessa standalone on aina asetettu arvoksi true. Tällä hetkellä tämä on enemmänkin Angularin palvelutyökalu, joten älä vielä syvenny siihen.

Avaa tiedosto app.component.ts ja tutki sitä.

Tee useita tyylitiedostoja ja liitä ne decoratoriin.