Ένα βήμα προς βήμα παράδειγμα που δείχνει πώς να δημιουργήσετε ένα προσαρμοσμένο σωλήνα στο γωνιακό 9

Γωνιακοί αγωγοί, ένας τρόπος για να γράψετε μετασχηματισμούς τιμών εμφάνισης που μπορούν να δηλωθούν σε HTML.

Το γωνιακό πλαίσιο παρέχει μια σειρά ενσωματωμένων σωλήνων που μπορούν να αξιοποιηθούν στην εφαρμογή σας. Το ακόλουθο [link] είναι μια αναφορά στην τεκμηρίωση του API που επισημαίνει διάφορους διαθέσιμους σωλήνες.

Όλοι γνωρίζουμε ότι δεν δημιουργούνται ίσες όλες οι εφαρμογές ιστού και σε ορισμένες περιπτώσεις διαπιστώνετε ότι χρειάζεστε έναν προσαρμοσμένο μετασχηματισμό όταν προβάλλετε πληροφορίες που δεν παρέχονται αυτήν τη στιγμή από το Γωνιακό πλαίσιο. Τι πρέπει να κάνεις?

Λοιπόν, αυτό το πρόβλημα μπορεί εύκολα να λυθεί με τη δημιουργία ενός επαναχρησιμοποιήσιμου προσαρμοσμένου σωλήνα που θα εγγραφείτε στην αίτησή σας προσθέτοντάς την στη δήλωση @NgModule. Τότε θα μπορείτε να το αναφέρετε όποτε χρειαστεί.

Σε αυτό το σεμινάριο θα σας καθοδηγήσω στα παρακάτω βήματα:

  • Δημιουργήστε έναν προσαρμοσμένο σωλήνα
  • Καταχωρήστε τον προσαρμοσμένο σωλήνα
  • Χρησιμοποιήστε το νεοσύστατο σωλήνα

Για να το καταδείξουμε, θα δημιουργήσουμε ένα σωλήνα που θα μετατρέπει / μετατρέψει χιλιόμετρα σε χιλιόμετρα χρησιμοποιώντας την ακόλουθη μαθηματική μετατροπή:

Υπάρχουν 1,609344 χιλιόμετρα σε ένα μίλι. Για να μετατρέψετε χιλιόμετρα σε χιλιόμετρα, πολλαπλασιάστε την τιμή μιλίων κατά 1,609344.
Φόρμουλα μετατροπής: d (mi) = d (km) / 1.609344
Παράδειγμα: απόσταση (mi) = 5 (km) / 1.6093 = 3.11 mi

1 - Δημιουργήστε προσαρμοσμένο σωλήνα

Τώρα ας δημιουργήσουμε το αρχείο γραφής που θα περιέχει τον κώδικα για τον προσαρμοσμένο μας σωλήνα. Στο γωνιακό σας έργο, πληκτρολογήστε την ακόλουθη εντολή στο VScode:> ng gp ./custom-pipes/kilometersToMiles

Αυτή η εντολή θα δημιουργήσει δύο αρχεία στην ακόλουθη δομή αρχείου: app> custom-pipe.

  • km-to-miles.pipe.spec.ts
  • km-to-miles.pipe.ts

Επιπλέον, αυτή η εντολή θα καταχωρίσει / προσθέσει τον προσαρμοσμένο προσαρμοσμένο σωλήνα στις δηλώσεις @NgModule στο αρχείο app.module.ts.

Τώρα που δημιουργήθηκε το προσαρμοσμένο αρχείο σωλήνων, πρέπει να εφαρμόσουμε τον κώδικα για να εκτελέσουμε τη λειτουργία μετατροπής. Ανοίξτε το αρχείο kil-to-mile.pipe.ts και προσθέστε τον ακόλουθο κώδικα:

μετασχηματισμός (τιμή: αριθμός): αριθμός {const kilometersInMile = 1.609344; αν (! isNaN (τιμή)) {αξία επιστροφής / χιλιόμετραInMile; } επιστροφή null; }}

Τα χιλιόμετρα προς τα μίλια.πέρ.π. θα πρέπει τώρα να μοιάζουν με αυτό:

Σε αυτό το σημείο δημιουργήσαμε τον προσαρμοσμένο σωλήνα και είναι έτοιμος για χρήση.

2 - Πώς να χρησιμοποιήσετε / αναφέρετε τον προσαρμοσμένο σωλήνα

Στο σχέδιό σας, ανοίξτε ένα συστατικό αρχείο html όπου θέλετε να χρησιμοποιήσετε αυτό το προσαρμοσμένο σωλήνα και προσθέστε την ακόλουθη έκφραση:

{{5 | kmToMiles}}

Σε αυτή την έκφραση λέμε γωνιώδη ότι θέλουμε να εφαρμόσουμε τον σωλήνα στην τιμή 5 που είναι σε χιλιόμετρα για να την μετατρέψουμε σε μίλια.

Για να δείτε την αλλαγή, στον τύπο τερματικού VScode στην ακόλουθη εντολή για να μεταγλωττίσετε και να εκτελέσετε το έργο σας:> ng serve -o

Μόλις καταρτιστεί ο κώδικας, το έργο σας θα ξεκινήσει σε ένα πρόγραμμα περιήγησης και θα δείτε τα εξής:

Αυτό που θα δείτε είναι ότι η τιμή 5 που έχετε κωδικοποιήσει σκληρά στο αρχείο html μετασχηματίζεται / μετατρέπεται σε μίλια.

3 - Πώς να χρησιμοποιήσετε το προσαρμοσμένο σωλήνα μέσα σε ένα αρχείο component.ts

Τώρα που γνωρίζουμε πώς να χρησιμοποιήσουμε το νεοδημιουργημένο σωλήνα σε ένα αρχείο component.html, ποια είναι τα βήματα για τη σωστή χρήση του μέσα σε ένα αρχείο component.ts; Είναι αυτό ακόμη δυνατό;

Η απάντηση είναι ναι. Προκειμένου να χρησιμοποιήσετε τον πρόσφατα προσαρμοσμένο σωλήνα ή έναν γωνιακό ενσωματωμένο σωλήνα μέσα σε ένα εξάρτημα, πρέπει να εγχύσουμε τον επιθυμητό σωλήνα στον κατασκευαστή και επίσης να τον προσθέσουμε στους παρόχους συστοιχιών στον διακοσμητή συνιστωσών.

Εδώ είναι πώς να το επιτύχει αυτό. Ανοίξτε το αρχείο component.ts όπου θέλετε να το χρησιμοποιήσετε και στον διακοσμητή @Component προσθέστε τον προσαρμοσμένο σωλήνα στη λίστα παρόχων.

Στη συνέχεια, ας προσθέσουμε έναν κατασκευαστή στο αρχείο component.ts αν δεν περιέχει ήδη ένα. Μέσα στον κατασκευαστή, προσθέστε τον προσαρμοσμένο σωλήνα ως παράμετρο:

Σε αυτό το σημείο, είπαμε γωνιακά ότι το component.ts θα έχει μια παρουσία του σωλήνα kilometerToMiles και το έχουμε εγχύσει μέσω του κατασκευαστή.

Για να χρησιμοποιήσετε τον αγωγό στον κώδικα, όσα πρέπει να κάνετε σε αυτό το σημείο είναι να κάνετε την ακόλουθη κλήση λειτουργίας:

this.convertToMiles.transform (x);
Σημείωση: x είναι η απόσταση σε χιλιόμετρο που προσπαθείτε να μετατρέψετε σε μίλια.

Παρακάτω είναι ένα στιγμιότυπο οθόνης ολόκληρου του κώδικα μέσα στο αρχείο component.ts που δείχνει πώς να καλέσετε το νεοδημιουργημένο προσαρμοσμένο σωλήνα.

Για να εμφανίσετε τη μετατροπή στο UI, ανοίξτε το αρχείο component.html και απλά προσθέστε τη μεταβλητή κλάσης που περιέχει την τιμή μετατροπής ως έκφραση:

{{απόστασηInMiles}}

Συγκεντρώστε και εκτελέστε τον κώδικα σας και θα παρατηρήσετε ότι η μετατροπή ήταν επιτυχής.

3 - Συμπέρασμα

Σε αυτό το σεμινάριο μάθαμε πώς να δημιουργήσουμε ένα προσαρμοσμένο σωλήνα και να το ανατρέξουμε στον κώδικα html και .ts. Αν και αυτό ήταν ένα vert απλό παράδειγμα, ωστόσο, οι βασικές αρχές για τη δημιουργία ενός σωλήνα δεν αλλάζουν κατά τη δημιουργία ενός πιο περίπλοκου.

Τώρα που ξέρετε πώς να δημιουργήσετε ένα προσαρμοσμένο σωλήνα, θα ήταν εξαιρετικά ενδιαφέρον να δείτε τι μπορείτε να δημιουργήσετε. Ελπίζω ότι αυτό το σεμινάριο ήταν χρήσιμο και ευεργετικό.