Was ist eine Angular-Komponente?

Question

Accepted Answer

Eine **Komponente** ist der Grundbaustein einer Angular-Benutzeroberfläche — eine TypeScript **class**, die mit `@Component` dekoriert ist und einen Bereich des Bildschirms (ihre "view") steuert. Jede Angular-App ist ein Baum von Komponenten. ## Anatomie einer Komponente ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` Der Dekorator `@Component` verbindet drei Dinge: einen **selector** (wie man ihn in HTML verwendet), ein **template** (das Markup) und **styles** (begrenzt auf diese Komponente). ## Die Klasse hält die Logik und Daten ```html

``` Die öffentlichen Eigenschaften und Methoden der Klasse sind über Binding direkt in ihrem Template zugänglich — das ist der Kern, wie Angular Daten und View verbindet. ## Eine Komponente verwenden ```html ``` ## Stile werden standardmäßig gekapselt ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular grenzt Komponentenstile automatisch ein (View Encapsulation), sodass CSS nicht zwischen Komponenten durchsickert. ## Warum es wichtig ist Komponenten sind die Art und Weise, wie Sie jede Angular-App strukturieren — in sich geschlossene Einheiten aus Template + Logik + begrenzte Stile, die zu einem Baum zusammengefügt sind. Das Verständnis des Dekorators `@Component` (selector, template, styles) und wie die Eigenschaften/Methoden der Klasse an das Template gebunden werden, ist die absolute Grundlage der Angular-Entwicklung; alles andere baut auf dem Komponentenmodell auf.