Die Datei mit der Komponentenklasse in Angular

Der Hauptteil jeder Komponente ist ihre Funktionalität, also eigentlich ihr Programm. In Angular wird die Funktionalität der Komponente in der Sprache TypeScript geschrieben und stellt eine OOP-Klasse dar.

In jeder Komponente befindet sich diese Klasse in einer Datei mit der Erweiterung .ts. In unserer Hauptkomponente ist das die Datei app.component.ts.

Lernen wir den Inhalt dieser Datei kennen. Achten Sie zunächst auf die Klasse unserer Komponente:

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

Auf diese Klasse wird der Dekorator @Component angewendet. Diese Dekorator nimmt als Parameter ein Objekt, das unsere Komponente konfiguriert:

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

In der Eigenschaft templateUrl ist der Pfad zur Datei angegeben, die das Markup unserer Komponente enthält.

In der Eigenschaft styleUrls ist ein Array von Pfaden zu CSS-Dateien angegeben, die das Markup unserer Komponente stylen. Wie Sie sehen, kann es mehr als eine Stildatei geben.

In der Eigenschaft selector ist der Selektor des HTML-Tags angegeben, in den der HTML-Code unserer Komponente ausgegeben (eingehängt) wird. In unserem Fall sehen wir den Namen app-root. Dieser Name entspricht einem gleichnamigen Tag. Dieser Tag ist in der Layout-Datei src/index.html geschrieben. An die Stelle, an der dieser Tag geschrieben ist, wird das Markup unserer Komponente eingefügt.

In der Eigenschaft imports sind die Module angegeben, die in unsere Komponente importiert werden.

In der Eigenschaft standalone wird immer der Wert true angegeben sein. Derzeit ist das eher eine dienstliche Sache von Angular, daher vertiefen Sie sich vorerst nicht darin.

Öffnen Sie die Datei app.component.ts und studieren Sie sie.

Erstellen Sie mehrere Dateien mit Styles und schließen Sie sie im Dekorator an.