Fil med komponentklass i Angular

Huvuddelen av alla komponenter är dess funktionalitet, det vill säga själva programmet. I Angular skrivs komponentens funktionalitet i programmeringsspråket TypeScript och representerar en OOP-klass.

I varje komponent finns denna klass i en fil med filändelsen .ts. I vår huvudkomponent blir detta filen app.component.ts.

Låt oss bekanta oss med innehållet i denna fil. Var först uppmärksam på klassen för vår komponent:

app/app.component.tsexport class AppComponent {
  title: string = 'test';
}

Decoratorn @Component tillämpas på denna klass. Denna dekoratör tar som sin parameter ett objekt som konfigurerar vår komponent:

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

I egenskapen templateUrl sätts sökvägen till filen som innehåller layouten för vår komponent.

I egenskapen styleUrls sätts en array av sökvägar till CSS-filer som stylar layouten för vår komponent. Som du ser kan det finnas fler än en stilmall.

I egenskapen selector sätts selektorn för HTML-taggen där (monteras) HTML-koden för vår komponent ska visas. I vårt fall ser vi namnet app-root. Detta namn motsvarar en tagg med samma namn. Denna tagg finns i layoutfilen src/index.html. På den plats där denna tagg är skriven kommer layouten för vår komponent att infogas.

I egenskapen imports anges de moduler som importeras till vår komponent.

I egenskapen standalone kommer alltid värdet true att anges. För närvarande är detta mestadels en intern sak i Angular, så förstå dig inte på den ännu.