Angular-Komponenten verstehen

Komponenten sind die Bausteine von Angular-Anwendungen. In dieser Lektion lernen Sie Komponenten und ihren Lebenszyklus kennen.

Was ist eine Komponente?

Eine Komponente ist ein Teil der Benutzeroberfläche, der HTML-, CSS- und TypeScript-Code enthält. Sie stellt einen Teil der Benutzeroberfläche Ihrer Anwendung dar.

Eine Komponente erstellen

Verwenden Sie Angular CLI, um einfach eine Komponente zu erstellen:

ng generate component my-component

ng generate component my-component

Komponentenstruktur

Eine Angular-Komponente besteht normalerweise aus vier Hauptdateien:

• .html: Vorlage
• .ts: Logik
• .css: Styles
• .spec.ts: Tests

Komponentendekorator

Der Dekorator @Component verbindet die Klasse Ihrer Komponente mit ihrer Vorlage und ihren Styles.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Lebenszyklus-Hooks

Angular-Komponenten verfügen über Lebenszyklus-Hooks, mit denen Sie zu bestimmten Zeitpunkten Code ausführen können. Häufig verwendete Hooks sind ngOnInit() und ngOnDestroy().

ngOnInit() verwenden

ngOnInit() wird ausgeführt, nachdem Angular die Komponentendaten initialisiert hat. Der Hook eignet sich besonders für die anfängliche Einrichtung:

ngOnInit() {
  console.log('Component initialized!');
}

Komponenten anzeigen

Verwenden Sie den Selector Ihrer Komponente in anderen Vorlagen, um sie anzuzeigen:

<app-my-component></app-my-component>

Zusammenfassung

Sie haben gelernt, was Komponenten sind, wie Sie sie erstellen und welche Lebenszyklus-Hooks es gibt. Gute Arbeit!