Lädt...

Dekorator Referenz

In Angular sind Dekoratoren zentrale Bausteine, die Metadaten zu Klassen, Eigenschaften und Methoden hinzufügen und dem Framework mitteilen, wie diese Elemente behandelt werden sollen. Die Beherrschung von Dekoratoren ist entscheidend für die Entwicklung komponentenbasierter Architekturen, die effiziente Zustandsverwaltung, den kontrollierten Datenfluss und die Verwaltung des Lebenszyklus von Komponenten in modernen Webanwendungen und SPAs ermöglichen.
Zu den wichtigsten Angular-Dekoratoren gehören @Component, @Directive, @Pipe, @Injectable und @NgModule. Jeder hat eine spezifische Rolle: @Component definiert eine UI-Komponente, @Directive erstellt benutzerdefinierte Direktiven, @Pipe transformiert Daten, @Injectable ermöglicht Dependency Injection und @NgModule organisiert zusammengehörige Klassen in kohärente Module. Zusätzliche Dekoratoren wie @Input und @Output steuern die Datenbindung zwischen Eltern- und Kindkomponenten, während @ViewChild und @ContentChild den Zugriff auf Kindkomponenten oder projizierte Inhalte erlauben.
Dieses Handbuch bietet detaillierte Erklärungen und praxisnahe Beispiele zur Nutzung von Dekoratoren, um Komponentenlogik, Ereigniskommunikation und Lifecycle-Interaktionen zu steuern und häufige Fehler wie Prop Drilling, unnötige Re-Renders und direkte Zustandsmutationen zu vermeiden. Lernende erfahren, wie man performante, wiederverwendbare und wartbare Komponenten strukturiert und die Best Practices für professionelle Angular-Projekte einhält.

Grundlegendes Beispiel

typescript
TYPESCRIPT Code 
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-benutzer-karte',
template: `     <div class="karte">       <h2>{{ name }}</h2>       <p>Alter: {{ alter }}</p>     </div>
`,
styles: [`     .karte {
padding: 16px;
border-radius: 8px;
background-color: #f0f0f0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
`]
})
export class BenutzerKarteComponent {
@Input() name!: string;
@Input() alter!: number;
}

Dieses Basisbeispiel zeigt, wie der Dekorator @Component BenutzerKarteComponent als wiederverwendbare Angular-Komponente definiert. Der Selector bestimmt das benutzerdefinierte HTML-Tag, während Template und Styles die Ansicht und das CSS festlegen. Die Dekoratoren @Input ermöglichen es der Komponente, Daten vom übergeordneten Element zu empfangen, wodurch Prop Drilling vermieden und eine kontrollierte Zustandsverwaltung sichergestellt wird.
Der Lifecycle der Komponente wird automatisch von Angular verwaltet, was eine korrekte Initialisierung, Renderung und Zerstörung gewährleistet. Änderungen an Input-Eigenschaften aktualisieren automatisch die Ansicht und minimieren unnötige Re-Renders. Dieses Beispiel veranschaulicht, wie Dekoratoren die Strukturierung von Komponenten, die Zustandsverwaltung und den Datenfluss in realen Angular-Projekten unterstützen.

Praktisches Beispiel

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-counter',
template: `     <div class="counter">       <h3>Zähler: {{ count }}</h3>       <button (click)="increment()">+</button>       <button (click)="decrement()">-</button>     </div>
`,
styles: [`     .counter {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
`]
})
export class CounterComponent {
@Input() count: number = 0;
@Output() countChange = new EventEmitter<number>();

increment() {
this.count++;
this.countChange.emit(this.count);
}

decrement() {
this.count--;
this.countChange.emit(this.count);
}
}

Advanced Angular Implementation

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-intelligenter-counter',
template: `     <div class="intelligenter-counter">       <h3>Intelligenter Zähler: {{ value }}</h3>       <button (click)="increase()">+</button>       <button (click)="decrease()">-</button>     </div>
`,
styles: [`     .intelligenter-counter {
background-color: #e8eef7;
padding: 16px;
border-radius: 12px;
text-align: center;
}
`]
})
export class IntelligenterCounterComponent implements OnInit, OnChanges {
@Input() value: number = 0;
@Output() valueChange = new EventEmitter<number>();

ngOnInit() {
console.log('IntelligenterCounter initialisiert mit Wert:', this.value);
}

ngOnChanges(changes: SimpleChanges) {
if (changes['value']) {
console.log('Wert geändert:', changes['value'].currentValue);
}
}

increase() {
this.value++;
this.valueChange.emit(this.value);
}

decrease() {
this.value--;
this.valueChange.emit(this.value);
}
}

IntelligenterCounterComponent kombiniert @Input und @Output mit Lifecycle-Hooks OnInit und OnChanges, um externe Daten reaktiv zu verwalten und den internen Zustand präzise zu kontrollieren. Initialwerte und Änderungen werden protokolliert, während EventEmitter den übergeordneten Komponenten Benachrichtigungen sendet.
Dieses Beispiel demonstriert, wie Dekoratoren leistungsfähige, wiederverwendbare Angular-Komponenten strukturieren, Prop Drilling und unnötige Re-Renders vermeiden und den Datenfluss optimieren. Die Kombination aus Lifecycle-Hooks, Dekoratoren und Ereignissen ermöglicht eine präzise Steuerung von Verhalten und Datenfluss, was Wartbarkeit und Performance verbessert.

Best Practices und Fallstricke: Verwenden Sie @Input nur für notwendige Daten und @Output für klar definierte Ereignisse. Direkte Zustandsmutationen und übermäßiges Prop Drilling sollten vermieden werden. ChangeDetectionStrategy.OnPush verbessert die Performance und reduziert unnötige Re-Renders. Angular DevTools ermöglicht die Überwachung von Lifecycle und Event-Emitter-Aktivitäten. Sicherheitsrelevant ist die Vermeidung unsicherer Dateninjektionen und die Aktivierung strenger Template-Prüfungen. Der richtige Einsatz von Dekoratoren sorgt für skalierbare, wartbare und performante Angular-Anwendungen.

📊 Umfassende Referenz

Angular Element/Method Description Syntax Example Notes
@Component Definiert eine Komponente @Component({...}) @Component({ selector:'app-demo', template:'...' }) Am häufigsten genutzter Dekorator
@Directive Benutzerdefinierte Direktive @Directive({...}) @Directive({ selector:'[highlight]' }) Erweitert DOM-Verhalten
@Pipe Datenumwandlung @Pipe({...}) @Pipe({name:'capitalize'}) Transformiert Daten im Template
@NgModule Definiert ein Modul @NgModule({...}) @NgModule({ declarations:[], imports:[] }) Organisiert Komponenten und Direktiven
@Injectable Dependency Injection @Injectable({...}) @Injectable({ providedIn:'root' }) Ermöglicht DI
@Input Eingabeeigenschaft @Input() prop:type @Input() title:string Datenfluss Eltern-Kind
@Output Ausgabeereignis @Output() event=new EventEmitter() @Output() clicked=new EventEmitter() Kind-zu-Eltern-Kommunikation
@HostListener DOM-Ereignisse abhören @HostListener('click') handler(){} @HostListener('window:scroll') onScroll() Bindet Ereignisse an Host
@ViewChild Zugriff auf Kindkomponente @ViewChild(ChildComponent) child!:ChildComponent Manipulation von Instanzen
@ContentChild Zugriff auf projizierten Inhalt @ContentChild(TemplateRef) tpl!:TemplateRef Template-Manipulation
@HostBinding Host-Property-Bindung @HostBinding('class.active') isActive=true Dynamische DOM-Attribute binden

📊 Complete Angular Properties Reference

Property Values Default Description Angular Support
selector string none Komponenten-Selector alle Versionen
template string none Komponententemplate 2+
styles array string[] none CSS-Stile
providers array [] Dependency-Provider 2+
inputs array [] Liste von @Input 4+
outputs array [] Liste von @Output 4+
animations array [] Komponentenanimationen 4+
changeDetection string 'Default' Change Detection Strategie 5+
encapsulation string 'Emulated' CSS-Encapsulation 2+
standalone boolean false Standalone-Komponente 14+
imports array [] Importierte Module 14+
schemas array [] Erlaubt benutzerdefinierte Elemente 9+

Zusammenfassend ermöglicht die Beherrschung von Angular-Dekoratoren die Erstellung wartbarer, leistungsfähiger und wiederverwendbarer Komponenten. Dies erleichtert Zustandsmanagement, Datenflusskontrolle und präzise Lifecycle-Steuerung. Empfohlene nächste Schritte sind die Vertiefung in Dependency Injection, Lifecycle-Hooks, Change Detection Strategien und den Einsatz von RxJS für asynchrone Prozesse. Die Kombination dieser Techniken mit Performance-Optimierungen und Debugging-Tools erlaubt ein professionelles Angular-Entwicklungsniveau.

Verwandte Suchbegriffe

Benutzer suchen auch mit diesen Begriffen nach diesem Inhalt:

Angular Dekoratoren Dekorator Referenz Angular @Component Beispiel Angular Datenbindung Angular Lifecycle Hooks Angular wiederverwendbare Komponenten Angular Zustandsmanagement Angular Performance Optimierung Angular @Input @Output Angular SPA Entwicklung Angular Debugging Angular DevTools fortgeschrittene Komponenten Angular EventEmitter Angular ChangeDetection Strategie Angular Template Zugriff Angular

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
3
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Angular Tutorial