Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

Eigene Pipes erstellen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wie Sie eine Pipe erstellen können, zeigt dieses Video anhand eines Beispiels, indem Eingabewerte umgekehrt werden.
09:09

Transkript

Wir haben bereits erfolgreich gelernt, wie wir in Angular 2 Pipes verwenden können. Im nächsten Schritt möchte ich euch jetzt zeigen, wie einfach es ist auch eigene Pipes zu erzeugen. Um das Ganze zu demonstrieren, habe ich jetzt vor, in den kommenden Minuten mit euch eine Pipe zu erzeugen, die im Grunde genommen eine Ausgabe umkehren soll. das heißt, alles soll von hinten nach vorne dargestellt werden. Das Ganze soll funktionieren für Arrays, für Zahlen, aber auch für Strings. Um das Ganze zu realisieren, werde ich eine Pipe-Datei erzeugen, die packe ich hier in mein "utils"-Ordner, weil das Ganze für mich natürlich auch ein Util ist, also eine Helfer-Pipe. Und heirfür erzeuge ich dann jetzt eine neue TypeScript-Datei, die ich ganz einfach hier "reverse.pipe.ts" nenne. Großartig. Der erste Schritt, den ich machen muss, um nun eine Pipe zu erzeugen, ist es der, dass ich den Pipe-Decorator verwende. Der Pipe-Decorator den hole ich mir jetzt hier einfach per "import" aus dem core. Der setzt Meatdaten für die jeweilige Pipe-Klasse und die Metadaten, die ich hier verwende, ist einfach der Name der Pipe und das soll "reverse" sein. Das heißt, ab jetzt, ist es so, dass wenn wir hier eine Klasse folgen lassen, Das machen wir hier jetzt einfach mal, "export class" "ReversePipe", dann ist es so, dass dann automatisch in dem Moment, wo ich mit einem Hochstrich dann "reverse" schreibe, ReversePipe automatisch vom Compiler dann verwendet wird. um die Ausgabe zu modifizieren. Wichtig ist es, dass wenn ich jetzt eine Pipe erzeuge, dass ich zwingend ein Interface implementieren muss, und zwar das "PipeTransform"-Interface. Das PipeTransform-Interface, wie ihr seht, wird von WebStorm für mich automatisch importiert. Sollte das bei euch nicht der Fall sein, müsst ihr das natürlich machen. Okay. Wenn ich das Ganze jetzt hier vervollständige, dann schimpft WebStorm auch mit mir, dass es sagt: Du hast hier ein Interface implementiert, aber hast gar nicht die Methoden dafür reingesetzt. Dabei unterstützt mich WebStorm auch damit, dass es sagt: Ich kann für dich automatisch alle Eigenschaften und Methoden des Interfaces für dich implementieren. Dann sage ich, mach das bitte, Und was wir hier sehen können, ist, dass es eine Transform-Methode erzeugt hat. Die Transform-Methode ist im Grunde genommen die Methode, die dann später dafür verantwortlich ist, die Ausgabe für uns zu modifizieren. Dabei ist "value" der Wert, der von außen hinzugefügt wird in die Pipe und "arguments" die optionalen Argumente, die die Pipe verarbeiten soll. In unserem Fall möchte ich, ohne Argumente arbeiten können. Das Ganze ist dann also vollkommen legitim. Und der Eingabewert, der soll ja bei mir als Array, string, oder auch als number funktionieren. Die Rückgabe ist hier ein "any" und im Wesentlichen ist das auch vollkommen richtig, denn ich weiß natürlich im ersten Moment noch nicht, was ich zurückgebe, es hängt ja davon ab, was ich reinbekommen habe. Als allererstes prüfe ich daher, über "if (value)" ob value überhaupt definiert war. Und als nächstes setze ich dann einfach einen Wert "isArray" auf "true". Sollte der Eingabewert, der der transform-Methode als Parameter übergeben worden ist, eine Instanz von Array gewesen sein. Das gleiche mache ich mit "string". Und zwar in dem Moment, wo entsprechend der "type of value" genau gleich ein "string" ist. Und last but not least mache ich das als "number". Ich mache also eine ganz kurze primitive Überprüfung, mit welchem Datentyp ich es überhaupt zu tun habe. der mir von außen reingelegt wurde. Als nächstes kann ich jetzt Folgendes machen: In dem Moment, wo ich weiß, dass das Ganze ein Array ist, was ich reinbekommen habe, kann ich die Rückgabe des Arrays umgekehrt relativ einfach realisieren, weil das Array eine Reverse-Methode hat. macht genau diese Umkehrung, die ich brauche. Das heißt, ich kann hier mit "return" einfach sagen: Zunächst einmal caste ich "value" zu einem Array, weil es ja hier über TypeScript als "any" reingekommen ist. Das heißt, ich schreibe jetzt hier Folgendes: Ich weiß ganz genau, dass "value" ein Array ist. Ich weiß nicht, was für Werte in diesem Array drin sind, deswegen ist es ein "any". Und dann kann ich einfach die reverse-Methode verwenden. Und die reverse-Methode macht nichts anderes als die Liste, die hier von außen eingegeben worden ist, einmal umzukehren und dann einfach wieder rauszugeben. Ansonsten überprüfe ich, ob der Wert ein string war, oder eine number, und mache nun Folgendes: Ich werde auf jeden Fall erstmal einen neuen Wert definieren. Der neue Wert ist vom Typ "any", denn ich weiß ja aktuell noch nicht, ob es ein string oder ein number tatsächlich ist. Und was ich jetzt aber mache, ist ein relativ einfacher Trick. Ich sage, die Eingabe, die reingekommen ist, der "value", soll mit dem Operator "+" einfach in einen string umgewandelt werden, indem ich ein Leerzeichen hier dranhänge. Danach werde ich den string mit "split" aufteilen in jeden einzelnen Buchstaben unabhängig davon, ob es eine Zahl ist, wie gesagt, oder nicht. Mache dann ein "reverse", um dann die Liste entsprechend umzukehren, und mit "join" werde ich jetzt hier einfach hingehen und wieder eine Zeichenkette daraus machen. Also was passiert hier? "value" kommt rein, ich weiß, dass "value" entweder eine Zahl ist, oder eine Zeichenkette. Ich verwandle es auf jeden Fall selbst wenn es eine Zahl wäre, jetzt hier in eine Zeichenkette, um dann jedes einzelne Zeichen in eine Liste zu packen. Die Liste kehre ich nun um, um nun dann anschließend dann hinzugehen, über "join" dafür zu sorgen, dass ich dann hier wieder eine Zeichenkette daraus mache. Und ich sorge jetzt eigentlich nur noch im letzten Schritt dafür, dass wenn das Initiale eine Zahl war, dass ich auch wirklich eine Zahl wieder zurückgebe, also "if" "isNumber" dann mache ein "return" von "parseFloat", und zwar "newValue". Großartig. Und ansonsten, falls es keine Zahl war, dann kannst du auch einfach "newValue" so wieder rausgeben. Das sieht gut aus. Bleibt im Grunde genommen noch der letzte Punkt, zu sage, nämlich sollte irgendwas schiefgelaufen sein, gebe ich einfach den Wert, der reingesteckt worden ist einfach wieder raus. Okay. Großartig. Von der reinen Theorie her, haben wir jetzt also unsere Pipe fertigprogrammiert. Im nächsten Schritt müssen wir jetzt natürlich die Pipe in unser Modul dann auch registrieren. Denn erst ab diesem Moment sind wir dann auch technisch in der Lage dieses Pipe zu verwenden, denn dann weiß der Compiler auch, zu welchem Pipe welche Klasse gehört. Also wechsle ich ins Utils-Modul und im Utils-Modul selber, sage ich dann, es gibt eine ReversePipe, die soll verwendet werden und auch exportiert werden. Exportiert deswegen, weil das Utils-Modul selber ja ein Shared-Module ist, welches selbst vom AppModule importiert wird und dementsprechend die Funktionalität reinholt. Perfekt. Im Wesentlichen können wir jetzt auch mal testen, ob das Ganze funktioniert. Ich beginne damit, dass ich innerhalb der "app.html" das "reverse" mal innerhalb einer Liste verwende, oder für eine Liste verwende. Schreibe jetzt hier mal "reverse" hin. Und dann seht ihr wunderbar, die Liste ist auf jeden Fall schon mal umgekehrt. worden. Hervorragend. Im nächsten Schritt möchte ich jetzt mal in die User-Komponente selbst gehen. Und in der User-Komponente selbst, werde ich jetzt den Namen mal reversen. Testen wir das Ganze. Hat auch das wunderbar funktioniert. Ihr seht, alle Namen sind jetzt reversed. Zu guter Letzt muss ich eigentlich nur noch testen, ob das Ganze jetzt auch noch mit einer Zahl funktionieren wird, also "2,14" soll jetzt reversed werden. Also wechsle ich jetzt hier in die "app.html" nochmal mache das Ganze mit einer Zahl, und jetzt sehen wir, es ist wunderbar, "41,2". Unser ReversePipe arbeitet hervorragend. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, eigene Pipes zu erzeugen.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!