Komponento klasės failas Angular

Pagrindinė bet kurio komponento dalis yra jo funkcionalumas, tai yra pati jo programa. Angular komponento funkcionalumas rašomas TypeScript kalba ir yra OOP klasė.

Kiekviename komponente ši klasė yra failo su plėtiniu .ts. Mūsų paginiame komponente tai bus failas app.component.ts.

Susipažinkime su šio failo turiniu. Pirmiausia atkreipkite dėmesį į mūsų komponento klasę:

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

Šiai klasei taikomas dekoratorius @Component. Šis dekoratorius savo parametru priima objektą, kuris konfigūruoja mūsų komponentą:

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

Savybėje templateUrl nustatytas kelias į failą, kuriame yra mūsų komponento žymėjimas.

Savybėje styleUrls nustatytas masyvas kelių į CSS failus, kurie stilizuoja mūsų komponento žymėjimą. Kaip matote, stilių failų gali būti ne vienas.

Savybėje selector nustatytas HTML žymės, į kurią bus išvedamas (montuojamas) mūsų komponento HTML kodas, selektorius. Mūsų atveju matome pavadinimą app-root. Šiam pavadinimui atitinka to paties pavadinimo žymė. Ši žymė parašyta maketo faile src/index.html. Į tą vietą, kur parašyta ši žymė, ir bus įterpiamas mūsų komponento žymėjimas.

Savybėje imports nurodyti moduliai, kurie importuojami į mūsų komponentą.

Savybėje standalone visada bus nurodyta reikšmė true. Šiuo metu tai greičiau Angular servisinė detalė, todėl kol kas į ją nesigilinkite.

Atidarykite failą app.component.ts ir ištirkite jį.

Sukurkite kelis failus su stiliais ir prijunkite juos dekoratoriuje.