Verwendung von @Input() in Angular

Sie können in Angular Daten von übergeordneten Komponenten zu untergeordneten Komponenten übergeben, indem Sie @Input() verwenden. @Input ist ein Dekorator, mit dem wir in einer untergeordneten Komponente eine Eigenschaft als Eingabe akzeptieren können.

Was ist @Input() und wie funktioniert es?

Der @Input() Dekorator ist ein wesentlicher Bestandteil von Angular und wird verwendet, um Werte von einer Komponente in eine andere zu übertragen. Dies geschieht meistens, wenn Sie Daten von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben möchten.

Denken Sie an das @Input() als an eine Tür, durch die Daten in Ihre Komponente eingeführt werden können. Es ist wie eine API für Ihre Komponente, die bestimmt, welche Daten in der Komponente verwendet werden können und welche nicht.

Praktische Anwendung und Beispiel

Ein Beispiel für die Verwendung von @Input() könnte sein, eine Liste von Produkten von einer übergeordneten Komponente (z.B. "ProductListComponent") an eine untergeordnete Komponente (z.B. "ProductItemComponent") zu übergeben.

In der übergeordneten Komponente ("ProductListComponent") könnten Sie eine Array von Produkten haben:

products = [{name: 'Product 1', price: 100}, {name: 'Product 2', price: 200}];

Und dann in Ihrer HTML-Datei könnten Sie das Array an die untergeordnete Komponente ("ProductItemComponent") übergeben:

<app-product-item *ngFor="let product of products" [productItem]="product"></app-product-item>

In der untergeordneten Komponente ("ProductItemComponent") würden Sie dann den @Input() verwenden, um das Produktobjekt zu empfangen:

@Input() productItem: {name: string, price: number};

Durch die Verwendung von @Input() können Sie dann auf die Daten zugreifen und sie in der untergeordneten Komponente verwenden.

Best practices

Bei der Arbeit mit @Input() in Angular ist es wichtig, dass Sie Ihre Anwendung so strukturieren, dass die Datenflussrichtung so einfach und direkt wie möglich ist. Dies bedeutet, dass Daten möglichst "nach unten" und Ereignisse möglichst "nach oben" fließen sollten. Das Verwenden von @Input() für den "nach unten" gerichteten Datenfluss und von @Output() für den "nach oben" gerichteten Ereignisfluss ist ein guter Ausgangspunkt.

Ebenfalls zu beachten ist, dass bei der Arbeit mit komplexeren Datenstrukturen oder größeren Datenmengen Lösungen wie Observables oder State Management Libraries (z.B. NgRx oder Akita), die einen globalen Zustand verwalten und die Datenflussverwaltung erleichtern, nützlich sein können.

Eine gute Kenntnis der Verwendung von @Input() ist jedoch entscheidend, um in Angular effiziente, wartbare und leicht verständliche Codebasen zu erstellen.