So erstellen Sie benutzerdefinierte Rohre in Angular

Pipes sind eine leistungsstarke Angular-Funktion, mit der Sie Daten in Ihrer Anwendung transformieren und formatieren können. Sie bieten eine bequeme Möglichkeit, Daten zu bearbeiten, bevor sie dem Benutzer angezeigt werden, wodurch Ihre Anwendung dynamischer und benutzerfreundlicher wird.

Angular bietet eine Vielzahl integrierter Pipes wie DatePipe, CurrencyPipe und UpperCasePipe. Zusammen mit den integrierten Pipes, die Angular bietet, können Sie benutzerdefinierte Pipes erstellen, um Daten auf jede gewünschte Weise zu transformieren.

Richten Sie Ihr Angular-Projekt ein

Stellen Sie vor dem Erstellen benutzerdefinierter Pipes sicher, dass Sie Pipes in Angular verstehen. Um ein Angular-Projekt einrichten zu können, stellen Sie sicher, dass die Angular-CLI auf Ihrem Computer installiert ist. Sie können es mit installieren npm (Node Package Manager).

Installieren Sie die Angular-CLI, indem Sie den folgenden Befehl ausführen:

npm install -g @angular/cli

Erstellen Sie als Nächstes ein neues Angular-Projekt, indem Sie diesen Befehl ausführen:

ng new my-app

Sobald Sie das Projekt erstellt haben, navigieren Sie zu Ihrem Projektverzeichnis und öffnen Sie Ihre Anwendung in Ihrer IDE.

Erstellen Sie ein benutzerdefiniertes Rohr

Nachdem Sie nun Ihre Angular-Anwendung eingerichtet haben, müssen Sie als Nächstes eine benutzerdefinierte Pipe erstellen. Um eine benutzerdefinierte Pipe zu erstellen, müssen Sie mit der Angular-CLI eine neue generieren.

Führen Sie dazu den folgenden Befehl im Verzeichnis Ihrer App auf dem Terminal aus:

ng generate pipe customPipe

Dieser Befehl generiert zwei Dateien mit dem Namen custom-pipe.pipe.ts Und custom-pipe.pipe.spec.ts im src/app Verzeichnis. Die Datei „custom-pipe.pipe.ts“ ist eine TypeScript-Datei das den Code zum Definieren Ihrer benutzerdefinierten Pipe enthält. Sie verwenden „custom-pipe.pipe.spec.ts“, um Tests für die benutzerdefinierte Pipe auszuführen.

Im custom-pipe.pipe.ts Datei finden Sie diese Codezeilen:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Dieser Codeblock importiert die Rohr Dekorateur und der PipeTransform Schnittstelle von der @angular/core Modul. Der Pipe-Dekorator definiert die Metadaten für die Pipe und die Pipe-Klasse implementiert die PipeTransform-Schnittstelle.

Im CustomPipePipe Klasse, Sie implementieren die PipeTransform Schnittstelle, die die Implementierung erfordert verwandeln Methode. Die Transformationsmethode ist für die Transformation des Eingabewerts verantwortlich.

Der verwandeln Die Methode benötigt zwei Parameter: Wert Und args. Der Parameter value stellt den Transformationswert der Pipe dar und der Parameter args stellt optionale Parameter dar, die Sie möglicherweise hinzufügen möchten.

Jetzt haben Sie den Grundbaustein des verstanden custom-pipe.pipe.ts Datei, ersetzen Sie den Codeblock oben durch diesen Code:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

In diesem Codeblock ist die verwandeln Methode nimmt die Wert Parameter des Typs Zeichenfolge als Argument und gibt ein Array von Zeichenfolgen zurück. Die Transformationsmethode teilt die Eingabezeichenfolge mithilfe von in ein Array einzelner Zeichen auf Teilt -Methode und gibt das resultierende Array zurück.

Integrieren der benutzerdefinierten Pipe in Ihre Anwendung

Sie haben Ihre benutzerdefinierte Pipe erfolgreich erstellt und können sie nun in Ihren Angular-Vorlagen verwenden. Bevor Sie die benutzerdefinierte Pipe in Ihrer Anwendung verwenden, importieren und deklarieren Sie sie in Ihrer app.module.ts Datei. Ersetzen Sie dazu den Code in app.module.ts durch Folgendes:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Jetzt können Sie die Pipe in Ihren Vorlagen verwenden. Öffne das app.component.html Datei und fügen Sie den folgenden Code hinzu:

<p>{{ 'apple' | CustomPipe }}p>

In diesem Beispiel verwenden Sie die CustomPipe Pipe, um den String zu transformieren 'Apfel' in ein String-Array.

Testen Sie Ihre individuelle Pfeife

Um Ihre benutzerdefinierte Pipe in Aktion zu sehen, führen Sie den Angular-Entwicklungsserver aus. Sie können dies tun, indem Sie den folgenden Terminalbefehl ausführen:

ng serve

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost: 4200. Die transformierte Zeichenfolge sollte auf der Seite angezeigt werden:

Bringen Sie Ihre Angular-Anwendungen auf die nächste Stufe

Pipes sind ein leistungsstarkes Angular-Tool, mit dem Sie Daten in Ihrer Anwendung transformieren und formatieren können. Sie können benutzerdefinierte Pipes erstellen, die Ihren spezifischen Anforderungen entsprechen und Ihre Angular-Anwendung dynamischer gestalten.

Eine weitere Möglichkeit, Ihre Angular-Anwendungen auf die nächste Ebene zu bringen, besteht darin, das Routing in Angular zu verstehen. Routing ist ein Schlüsselkonzept, mit dem Sie steuern können, wie Benutzer durch Ihre Anwendung navigieren. Wenn Sie das Routing verstehen, können Sie benutzerfreundlichere und effizientere Single-Page-Anwendungen erstellen.