Ein umfassender Leitfaden für Rohre in Winkelform

Mit Pipes in Angular können Benutzer Daten transformieren, bevor sie in der Ansicht angezeigt werden. Pipes ähneln Filtern in anderen Programmiersprachen, sind jedoch flexibler und können an spezifische Anforderungen angepasst werden. Hier erfahren Sie, wie Sie Pipes in Ihrer Angular-Anwendung verwenden.

Was sind Rohre in Winkelform?

Angular Pipes sind Datentransformatoren, die Ihre App dynamischer machen. Sie nehmen einen Wert als Eingabe und geben einen transformierten Wert als Ausgabe zurück. Die Datentransformation kann so einfach sein wie das Formatieren eines Datums oder einer Währung oder so komplex wie das Filtern oder Sortieren einer Liste von Elementen.

Sie können die Rohre verwenden in Ihren Angular-Komponenten und Ihre Vorlagen. Pipes sind einfach zu verwenden und Sie können sie verketten, um komplexere Transformationen zu erstellen.

Angular bietet mehrere integrierte Rohre, darunter DatePipe

, UpperCasePipe, LowerCasePipe, WährungPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe, Und AsyncPipe. Es bietet auch die Funktionalität zum Erstellen benutzerdefinierter Rohre.

Jede integrierte Angular-Pipe erfüllt eine einzigartige Funktion und kann Ihnen bei der Datentransformation helfen.

DatePipe

Der DatePipe Formate und Darstellungen Ihre Datums- und Zeitvariablen in einem bestimmten Format, unter Berücksichtigung Ihres Gebietsschemas. Im Gegensatz zu anderen Frameworks, die dies erfordern JavaScript-Pakete zum Formatieren von Datum und Uhrzeit, Angular verwendet die DatePipe. Benutzen DatePipe Fügen Sie in Ihrer Anwendung das Pipe-Symbol (|) gefolgt von hinzu Datum und alle zusätzlichen Parameter.

Zum Beispiel:

<p>Today's date is {{ currentDate | date }}p>

In diesem Beispiel übergeben Sie die aktuelles Datum variabel durch die DatePipe, das es dann entsprechend dem Standarddatumsformat formatiert. Sie definieren die aktuelles Datum Variable in der TypeScript-Datei Ihrer Komponente.

Hier ist ein Beispiel:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Sie können dem auch zusätzliche Parameter übergeben DatePipe So passen Sie die Ausgabe an:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Der obige Codeblock hat das übergeben kurzes Date Parameter zum DatePipe. Dies sagt das DatePipe, um das Datum im kurzen Datumsformat zu formatieren. Neben dem kurzes Date Parameter können Sie konfigurieren DatePipe unter Verwendung verschiedener Parameter, einschließlich z, longDateund benutzerdefinierte Datumsformate wie z TT/MM/JJ.

UpperCasePipe und LowerCasePipe

Der UpperCasePipe Und LowerCasePipe Verwandeln Sie Ihre Texte. Mit dem wandeln Sie Ihre Texte in Großbuchstaben um UpperCasePipe und Kleinbuchstaben mit dem LowerCasePipe.

Um das zu nutzen UpperCasePipe Und LowerCasePipe, fügen Sie das Pipe-Symbol (|) gefolgt von hinzu Kleinbuchstaben zu verwenden LowerCasePipe oder Großbuchstaben zu verwenden UpperCasePipe.

Nachfolgend finden Sie ein Beispiel für die Verwendung von UpperCasePipe Und LowerCasePipe:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

WährungPipe

Verwendung der WährungPipekönnen Sie Zahlen in Ihrer Anwendung in eine Währung formatieren. Der WährungPipe Formatiert die Zahlen entsprechend Ihrem Gebietsschema. Um Ihre Zahlen mit dem zu formatieren WährungPipe, verwenden Sie das Pipe-Symbol gefolgt von Währung.

Zum Beispiel:

<p>{{ number | currency }}p>

In diesem Beispiel ist die WährungPipe wandelt die Zahlenvariable in eine Währung um. Standardmäßig ist die WährungPipe wandelt Variablen in Dollar um. Um dies zu ändern, können Sie das konfigurieren WährungPipe durch Übergabe zusätzlicher Parameter in andere Währungen umrechnen zu können.

Hier ist ein Beispiel:

<p>{{ number | currency: 'GBP' }}p>

Hier passieren Sie die Britisches Pfund Parameter zum WährungPipe. Dadurch wird sichergestellt, dass die Nummer Die Variable wird in die Währung Britisches Pfund umgerechnet.

DecimalPipe und PercentPipe

Der DecimalPipe wandelt Ihre Zahlen in Dezimalzahlen um, während die PercentPipe wandelt Ihre Zahlen in Prozente um.

Um das zu nutzen DecimalPipe, verwenden Sie das Pipe-Symbol gefolgt von Nummer und zusätzliche Parameter. Um das zu nutzen PercentPipeMachen Sie dasselbe, ersetzen Sie jedoch die Nummer mit Prozent ohne zusätzliche Parameter.

Zum Beispiel:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Die zusätzlichen Parameter, die an übergeben werden DecimalPipe Steuern Sie die Anzahl der angezeigten Ganz- und Bruchstellen. Der 1 Der Parameter gibt an, dass mindestens eine Ganzzahl vorhanden sein sollte. Im Vergleich dazu die 2.3 Der Parameter gibt an, dass es mindestens zwei und bis zu drei Nachkommastellen geben sollte.

JsonPipe

Der JsonPipe ist eine integrierte Pipe, die Daten in ein JSON-String-Format konvertiert. Es wird hauptsächlich für Debugging-Zwecke verwendet. Du kannst den... benutzen JsonPipe sowohl für Objekte als auch für Arrays.

Die Syntax für die Verwendung von JsonPipe ist wie folgt:

{{ expression | json }}

Hier, Ausdruck sind die Daten, die Sie in das JSON-Format konvertieren möchten. Der Pipe-Operator (|) wendet das an JsonPipe zum Ausdruck.

Definieren Sie beispielsweise ein Objekt und ein Array in Ihrer Komponente:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Der obige Codeblock definiert a Benutzer Objekt und a Profile Array. Jetzt können Sie das verwenden JsonPipe um das Objekt und das Array in JSON zu konvertieren.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Hier das JsonPipe wird das konvertieren Benutzer Objekt und das Profile Array in einen JSON-String, den Sie während der Entwicklung oder beim Debuggen schnell in Ihren Vorlagen überprüfen können.

SlicePipe

Der SlicePipe ist dem JavaScript sehr ähnlich Scheibe() Methode. Der SlicePipe formatiert Arrays oder Strings, indem es ihre Elemente extrahiert, um neue Arrays oder Strings zu erstellen.

Um das zu nutzen SlicePipeverwenden Sie das Pipe-Symbol gefolgt von Scheibe und zwei Parameter, die Start- und Endindizes. Der Startindex ist die Position im Array oder String, an der die Pipe mit dem Extrahieren von Elementen beginnt, und der Endindex ist die Position, an der die Pipe mit dem Extrahieren von Elementen aufhört.

Hier ist ein Beispiel für die Verwendung von SlicePipe:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

In diesem Beispiel ist die SlicePipe extrahiert die ersten beiden Elemente aus dem Zeichenfolge Variable, das Element bei Index 0 und das Element bei Index 1. Außerdem wird das erste Element aus extrahiert Array Variable. Der SlicePipe ist nützlich, wenn Sie nur einen Teil der Daten in der Vorlage anzeigen möchten.

AsyncPipe

AsyncPipe ist eine integrierte Angular-Pipe, die automatisch ein Observable oder Promise abonniert und abmeldet. Es gibt den letzten vom Observable oder Promise ausgegebenen Wert zurück.

Die Syntax für die Verwendung AsyncPipe ist wie folgt:

{{ expression | async }}

Hier ist der Ausdruck das Observable oder Promise, das Sie abonnieren möchten.

Zum Beispiel:

let numbers = of(1, 2, 3, 4, 5);

Sie können verwenden AsyncPipe um dieses Observable zu abonnieren und den zuletzt ausgegebenen Wert wie folgt anzuzeigen:

<p>{{ numbers | async }}p>

Dieser Codeblock gibt die letzte vom Observable ausgegebene Zahl aus. AsyncPipe ist sehr nützlich, wenn Sie asynchrone Vorgänge in Ihren Vorlagen verarbeiten. Es abonniert automatisch das Observable oder Promise, wenn die Komponente initialisiert wird, und kündigt das Abonnement, wenn es zerstört wird.

Verketten von Rohren in Winkelform

Sie können Pipes miteinander verketten, um mehrere Transformationen in einem einzigen Ausdruck durchzuführen. Das Verketten von Pipes ist so einfach wie die Verwendung mehrerer Pipe-Operatoren (|) in einem einzigen Ausdruck. Die Ausgabe jeder Pipe wird zur Eingabe für die nächste.

Hier ist die grundlegende Syntax:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Sie können beispielsweise ein Datumsobjekt mithilfe von in eine Zeichenfolge umwandeln DatePipe und konvertieren Sie diese Zeichenfolge dann mithilfe von in Großbuchstaben UpperCasePipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Erstellen Sie dynamische Anwendungen mithilfe von Pipes

Pipes sind eine leistungsstarke Funktion in Angular, mit der Sie Daten transformieren können, bevor sie in der Ansicht angezeigt werden. Hier haben Sie mehr über die verschiedenen integrierten Pipes erfahren, die Angular anbietet, wie DatePipe, CurrencyPipe, UpperCasePipe usw. Sie haben auch gelernt, wie Sie sie in Ihrer Anwendung verwenden, um dynamischere Inhalte zu erstellen. Mithilfe von Pipes können Entwickler flexiblere und dynamischere Webanwendungen mit weniger Code erstellen.