Komponenta klases fails Angular

Katras komponentes pamatdaļa ir tās funkcionalitāte, tas ir, faktiski tās programma. Angular komponentes funkcionalitāte tiek rakstīta TypeScript valodā un ir OOP klase.

Katrā komponentē šī klase atrodas failā ar paplašinājumu .ts. Mūsu pamatkomponentē tas būs fails app.component.ts.

Iepazīsimies ar šī faila saturu. Sākumā pievērsiet uzmanību mūsu komponentes klasei:

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

Šai klasei tiek piemērots dekorators @Component. Šis dekorators ar savu parametru pieņem objektu, kas konfigurē mūsu komponenti:

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

Īpašībā templateUrl ir norādīts ceļš uz failu, kas satur mūsu komponentes izmantošanu.

Īpašībā styleUrls ir norādīts masīvs ar ceļiem uz CSS failiem, kas stila mūsu komponentes izmantošanu. Kā redzat, stila failu var būt vairāki.

Īpašībā selector ir norādīts HTML atlases tegs, kurā tiks izvadīts (montēts) mūsu komponentes HTML kods. Mūsu gadījumā mēs redzam nosaukumu app-root. Šim nosaukumam atbilst tāda paša nosaukuma tegs. Šis tegs ir uzrakstīts maketa failā src/index.html. Tajā vietā, kur ir uzrakstīts šis tegs, tiks ievietota mūsu komponentes izmantošana.

Īpašībā imports ir norādīti moduļi, kas tiek importēti mūsu komponentē.

Īpašībā standalone vienmēr būs norādīta vērtība true. Pašlaik tā ir vairāk Angular servisa lieta, tāpēc pagaidām tajā neiedziļinieties.

Atveriet failu app.component.ts un izpētiet to.

Izveidojiet vairākus failus ar stiliem un pievienojiet tos dekoratorā.