Pipes in Angular sind einfache Funktionen, die zum Transformieren von Daten in Vorlagen verwendet werden, ohne die zugrunde liegenden Daten zu ändern. Pipes nehmen einen Wert auf, verarbeiten ihn und geben eine formatierte oder transformierte Ausgabe zurück. Sie werden häufig zum Formatieren von Datumsangaben, Zahlen, Zeichenfolgen und sogar Arrays oder Objekten verwendet.

Sie ermöglichen Ihnen, Daten direkt in der Ansicht zu formatieren und in einem besser lesbaren oder relevanteren Format anzuzeigen, ohne das zugrunde liegende Datenmodell zu ändern.

Die Verwendung von Pipes hilft dabei, den Code sauber und lesbar zu halten. Anstatt komplexe Logik in die Vorlagen oder Komponenten zu schreiben, können Sie diese Logik in einer Pipe kapseln, die dann in verschiedenen Teilen Ihrer Anwendung wiederverwendet werden kann.
Wenn Sie beispielsweise eine Blog-Plattform entwickeln, auf der Benutzer das Veröffentlichungsdatum von Artikeln sehen können. Daten müssen in einem benutzerfreundlichen Format angezeigt werden, z. B. „31. August 2024“ anstelle des Rohformats „2024–08–31T14:48:00.000Z“. Mit pipes können Sie Angulars integriertes DatePipe in der Vorlage verwenden, anstatt das Datum in der Komponente manuell zu formatieren, was den Code überladen und die Lesbarkeit beeinträchtigen würde.

Published on: {{ article.publishDate | date:'longDate' }}

Um eine Pipe anzuwenden, verwenden Sie den Pipe Operator (|) innerhalb eines Vorlagenausdrucks, wie im obigen Codebeispiel gezeigt.

Eingebaute Rohre

Angular verfügt über mehrere integrierte Pipes, die allgemeine Aufgaben abdecken (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, usw.). Wenn Sie wissen, wie Sie diese verwenden, können Sie Ihren Code sauberer und effizienter machen.

Beispiele:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

Preis: {{ product.price | Währung:'USD' }}

{{ Benutzername | Großbuchstabe }}

Parametrisierte Rohre

Viele Angular-Pipes akzeptieren Parameter, um ihr Verhalten anzupassen.

Um den Parameter anzugeben, folgen Sie dem Pipe-Namen mit einem Doppelpunkt (:) und dem Parameterwert

Einige Pipes akzeptieren mehrere Parameter, die durch zusätzliche Doppelpunkte getrennt sind.

Parameter können optional oder erforderlich sein. Angenommen, Sie verfügen über eine benutzerdefinierte Pipe, die Währungen formatiert und erfordert, dass Sie den Währungstyp als Parameter angeben. Wenn dieser Parameter nicht angegeben wird, kann die Pipe den Wert möglicherweise nicht korrekt formatieren.

The product price is {{ price | customCurrency:'USD' }}

1. DatePipe mit Parametern

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

Dadurch wird das Datum als „31. August 2024, 14:48:00 Uhr“ formatiert.

2. CurrencyPipe mit Parametern

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

Dadurch wird der Preis als „1.235 €“ formatiert (auf keine Dezimalstellen gerundet).

Verketten von Rohren

Sie können mehrere Pipes miteinander verketten, um komplexe Transformationen zu erreichen.

{{ article.content | slice:0:100 | uppercase }}

Dadurch werden die ersten 100 Zeichen von article.content zerlegt und in Großbuchstaben umgewandelt.

Kundenspezifische Rohre

Manchmal erfüllen die integrierten Pipes möglicherweise nicht Ihre spezifischen Anforderungen und Sie müssen eine benutzerdefinierte Pipe erstellen, um die spezifische Logik zu verarbeiten. Hier erfahren Sie, wie Sie es tun können.

Beispiel:

Im folgenden Beispiel erstellen wir eine Pipe, die eine Begrüßung zu einem Namen wie „Hallo, Alice!“ hinzufügt.

Führen Sie den folgenden Befehl aus, um eine neue Pipe zu generieren:

ng generate pipe greet

Jetzt ändern wir die Datei „greet.pipe.ts“ im Verzeichnis src/app, um die Pipe-Logik einzuschließen:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Sobald Ihre Pipe fertig ist, können Sie sie in Ihren Vorlagen verwenden.

{{ 'Alice' | greet }}

Erstellen einer parametrisierten benutzerdefinierten Pipe

Jetzt werden wir die Begrüßung anpassbar machen, sodass Sie „Hallo, Alice!“ sagen können. oder „Willkommen, Alice!“ je nachdem, was Sie an die Pipe übergeben.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

Die Transformationsmethode verfügt jetzt über einen zweiten Parameter, Begrüßung. Wenn keine Begrüßung angegeben ist, lautet die Standardeinstellung „Hallo“.

Jetzt können Sie die Begrüßung in Ihren Vorlagen anpassen.

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

Reine vs. unreine Pfeifen

1. Reine Pfeifen
Standardmäßig sind alle Winkelrohre rein. Eine reine Pipe wird nur aufgerufen, wenn Eingabedaten (wie eine Zahl oder eine Zeichenfolge) oder wenn sich der Verweis auf ein Objekt (wie ein Array oder ein Datum) ändert. Dies macht reine Pipes effizient und leistungsfähig, da die Pipe nicht unnötig läuft.

Wenn Ihre Daten jedoch komplexer sind, wie etwa ein Array von Elementen, bemerkt Angular möglicherweise keine Änderungen innerhalb des Arrays (wie das Hinzufügen eines neuen Elements), da sich der Verweis auf das Array nicht geändert hat.

Halten Sie Ihre Pipes, sofern nicht erforderlich, rein, um unnötiges erneutes Rendern zu vermeiden und die Leistung aufrechtzuerhalten.

Beispiel:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In Ihrer Vorlage:

• {{ item.name }} - {{ item.price | formatPrice }}

Wenn Sie dem Array items einen neuen Artikel hinzufügen, der zum Verkauf steht, können Sie davon ausgehen, dass er in der Liste angezeigt wird. Wenn Sie das neue Element jedoch einfach in das Array verschieben, wird die Liste möglicherweise nicht aktualisiert, da sich die Array-Referenz nicht geändert hat.

2. Unreine Rohre

Eine unreine Pipe hingegen wird jedes Mal aufgerufen, wenn Angular einen Änderungserkennungszyklus durchführt. Da sie jedoch so oft ausgeführt werden, können sie Ihre App verlangsamen.

Beispiel:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In Ihrer Vorlage:

• {{ item.name }} - {{ item.price | formatPrice }}

Wenn Sie nun ein neues Element hinzufügen, bemerkt die Pipe die Änderung und aktualisiert die Liste.

Best Practices für die Verwendung von Pipes

1. Halten Sie Pipes einfach. Vermeiden Sie umfangreiche Berechnungen in Pipes

2. Rohre klar und anschaulich benennen

3. Pipes auf eine einzige Verantwortung konzentrieren

4. Vermeiden Sie nach Möglichkeit unreine Rohre

5. Benutzerdefinierte Rohre gründlich testen

Abschluss

Angular Pipes rationalisieren Datentransformationsaufgaben und machen Ihren Code modularer, wiederverwendbarer und wartbarer. Sie tragen dazu bei, die Konsistenz in der gesamten Anwendung durchzusetzen und die Lesbarkeit Ihrer Vorlagen zu verbessern, was für die Entwicklung skalierbarer und wartbarer Anwendungen von entscheidender Bedeutung ist.