Angular-Tutorial: So erstellen Sie ein benutzerdefiniertes Rohr in Angular

Blog

Angular-Tutorial: So erstellen Sie ein benutzerdefiniertes Rohr in Angular

Angular-Tutorial: So erstellen Sie ein benutzerdefiniertes Rohr in Angular

Pipes in Angular sind eine großartige Möglichkeit, Daten direkt aus Ihren Vorlagen zu transformieren und zu formatieren. Out of the box erhalten Sie Pipes für Datums-, Währungs-, Prozent- und Zeichenfälle, aber Sie können auch ganz einfach eigene benutzerdefinierte Pipes definieren. Hier kommt das Konzept der Erstellung einer Custom Pipe in Angular ins Spiel, mit dem wir uns schön erweitern können unsere Anwendungen.

Was sind Rohre in Angular?

Angular bietet einige hilfreiche Filter, bekannt als Pipes, die es sehr einfach machen, den Datenwert nach unseren Bedürfnissen zu formatieren oder zu transformieren.
Pipes werden mit einem Pipe (|)-Zeichen verwendet, es nimmt eine Eingabe entgegen und gibt eine gewünschte formatierte Ausgabe zurück. Einfach oder?

Angular verfügt über einige integrierte Pipes, die mit dem CommonModule des Frameworks geliefert werden, sodass wir sie in jedem Modul verwenden können, das wir schreiben.

Hier sind ein paar übliche Verdächtige, denen wir mit den eingebauten Pipes von Angular begegnen könnten:

roku-mit-link
  • DatePipe (zum Parsen von Date-Objekten)
  • UpperCasePipe (für Strings mit Großbuchstaben)
  • LowerCasePipe (für Strings mit Kleinbuchstaben)
  • CurrencyPipe (zum Formatieren von Währungen)
  • AsyncPipe (zum Entpacken asynchroner Werte wie Observables!)

Einfach ausgedrückt, können wir mit Pipes die Transformation von Anzeigewerten direkt in die Vorlage schreiben. Angular wird mit Standard- oder eingebauten Rohren geliefert, um Ihre Werte in das umzuwandeln, was der Benutzer sehen soll. Mit der Date Pipe können Sie beispielsweise das Datumsformat und andere Aspekte im Zusammenhang mit dem Datum ändern.

Das ist die Essenz einer Pipe!

Wie verwenden wir eine Pipe? Nehmen wir an, eine einfache HTML-Komponente mit einer Bindung eines Datumsstempels:

Dies könnte wie oben mit dem formatierten Datum gerendert werden. Das ist also ein gültiger Anwendungsfall für Pipes! Wir möchten nicht wirklich Daten abrufen und dann alles durchlaufen und jedes Datum von einem Date-Objekt in einen String konvertieren, da wir die native Date-Objektfunktionalität verlieren und Werte duplizieren würden. Es ist super praktisch, eine Pipe zu verwenden und sie für uns analysieren zu lassen!

Jetzt sind Sie bereit, sich in Custom Pipes zu wagen! Auf diese Weise können wir eine Funktion verwenden, um unsere eigenen Eingaben und Ausgaben basierend auf dem, was Sie bereitstellen, zu erstellen. Tauchen wir ein!

Verwenden von benutzerdefinierten Rohren

Nehmen wir an, ein Bild wurde gerade über eine Drag-and-Drop-Zone hochgeladen – und wir erhalten einige Informationen daraus. Ein vereinfachtes Dateiobjekt, mit dem wir arbeiten werden:

jquery Eingabemaske Telefon
export class FileComponent { file = { name: 'logo.svg', size: 2120109, type: 'image/svg' }; }

Eigenschaften |_+_| und |_+_| sind nicht das, was uns wirklich interessiert, um mehr über Pfeifen zu erfahren - aber die Größe ist die, die wir gerne hätten. Lassen Sie uns ein kurzes Beispiel zusammenstellen, wie wir die Verwendung unserer Pipe definieren (die Zahlen in Dateigrößen umwandelt):

name

Erstellen einer benutzerdefinierten Pipe

Um eine Pipe-Definition zu erstellen, müssen wir zuerst eine Klasse erstellen (die in einer eigenen Datei leben würde). Wir nennen dies unser |_+_|, da wir im Wesentlichen einen numerischen Wert in einen für den Menschen lesbareren String-Wert umwandeln:

type

Jetzt haben wir dieses Setup, wir müssen unsere Pipe benennen. Im obigen HTML haben wir dies getan:

Also müssen wir die Pipe-Dateigröße benennen.

FileSizePipe

Alles, was wir tun müssen, ist ein |_+_| . bereitzustellen -Eigenschaft, die auch unserem Vorlagencodenamen entspricht (wie Sie sich vorstellen können).

Vergessen Sie nicht, die Pipe in Ihrem |_+_| . zu registrieren auch unter |_+_|:

export class FileSizePipe {}

HINWEIS: Pipes fungieren eher als Dienstprogrammklassen, daher ist es wahrscheinlich, dass Sie eine Pipe in einem gemeinsam genutzten Modul registrieren möchten. Wenn Sie Ihre benutzerdefinierte Pipe an anderer Stelle verwenden möchten, verwenden Sie einfach |_+_| auf dem |_+_|.

Pipe und PipeTransform

Sobald wir unser Klassensetup haben, registriert und die |_+_| Dekorateur hinzugefügt - der nächste Schritt ist die Implementierung des |_+_| Schnittstelle:

wie man heiß kauft

Dadurch entsteht ein erforderlicher Vertrag, dass unsere FileSizePipe folgende Struktur einhalten muss:

import { Pipe } from '@angular/core'; @Pipe({ name: 'filesize' }) export class FileSizePipe {}

Aus diesem Grund haben wir die |_+_| . hinzugefügt -Methode zu unserer Klasse oben.

Rohrtransformationswert

Da wir unsere Pipe per Interpolation verwenden, ist dies die Magie, wie wir Argumente in einer Pipe erhalten.

Die |_+_| Variable wird direkt an unsere |_+_| -Methode als erstes Argument.

Wir können das unser |_+_| . nennen und geben Sie es richtig ein:

name

Von hier aus können wir die Logik implementieren, um den numerischen Wert in ein besser lesbares Megabyte-Format umzuwandeln.

App-Clips iOS 14-Tutorial
@NgModule

Wir geben einen Typ zurück |_+_| da wir |_+_| . anhängen am Ende. Das gibt uns dann:

declarations

Wir können nun zeigen, wie Sie benutzerdefinierten Pipes Ihre eigenen benutzerdefinierten Argumente hinzufügen.

Knoten js Singleton-Muster

Pipes mit Argumenten

Nehmen wir also an, dass wir für unseren Anwendungsfall erlauben möchten, die Erweiterung etwas anders als beworben anzugeben.

Bevor wir die Vorlage aufrufen, fügen wir einfach die Funktion für eine Erweiterung hinzu:

// ... import { FileSizePipe } from './filesize.pipe'; @NgModule({ declarations: [ //... FileSizePipe, ], }) export class AppModule {}

Ich habe einen Standardparameterwert verwendet, anstatt das|_+_| . anzuhängen bis zum Ende der Saite. Dies ermöglicht es uns, das Standard-'MB' zu verwenden oder es zu überschreiben, wenn wir es verwenden. Was uns zu unserem nächsten Ziel führt, ein Argument in unsere Pipe zu übergeben:

exports: [YourPipe]

Und das ist alles, was Sie brauchen, um Ihrer benutzerdefinierten Pipe ein Argument zu liefern. Mehrere Argumente werden einfach durch |_+_| getrennt, zum Beispiel:

Vergessen Sie nicht, dass Sie diese Pfeifen mit anderen verketten können, wie Sie es bei Datteln und so weiter tun würden.

Hier ist der fertig zusammengestellte Code:

@NgModule

Willst du eine Herausforderung? Erweitern Sie diese benutzerdefinierte Pipe, mit der Sie die Pipe in Gigabyte, Megabyte und anderen Formaten darstellen können, die Sie möglicherweise nützlich finden. Es ist immer eine gute Übung, von einem Ausgangspunkt aus zu lernen!

Erfahren Sie mehr

#eckiger #Entwickler