Πώς να δημιουργήσετε προσαρμοσμένους σωλήνες στο Angular για κομψή εμφάνιση δεδομένων

Το Pipes in Angular είναι μια από τις φράσεις που θα συναντήσετε συχνά καθώς δημιουργείτε διεπαφές χρήστη χρησιμοποιώντας το Angular. Τι είναι και πώς λειτουργούν;

Το Angular συγκαταλέγεται στα κορυφαία 5 πιο επιθυμητά πλαίσια ιστού και τεχνολογίες που βασίζονται στο Έρευνα StackOverflow.

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

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

Πίνακας περιεχομένων

Τι είναι οι σωλήνες στο Angular;

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

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

Μετασχηματισμός δεδομένων: Αυτή είναι η κύρια χρήση των Pipes στο Angular. Οι σωλήνες υπάρχουν για να μετασχηματίσουν τα δεδομένα έτσι ώστε αυτά που εμφανίζονται στους χρήστες να είναι αναγνώσιμα.
Αναγνωσιμότητα και δυνατότητα συντήρησης κώδικα: Οι περισσότερες εφαρμογές δημιουργούνται μέσω συνεργασίας. Ως εκ τούτου, πρέπει να διασφαλίσετε ότι τα άλλα μέλη της ομάδας κατανοούν τον κώδικά σας. Οι σωλήνες κάνουν τον κώδικά σας πιο συνοπτικό και εύκολο στη συντήρηση.
Τοπική προσαρμογή: Μπορείτε να προσαρμόσετε τα δεδομένα ώστε να ταιριάζουν στην αγορά-στόχο. Για παράδειγμα, υπάρχουν διαφορετικές μορφές ημερομηνίας. Έτσι, μπορείτε να χρησιμοποιήσετε το DatePipe για να μορφοποιήσετε δεδομένα ώστε να ταιριάζουν στις τοπικές ρυθμίσεις των χρηστών.
Ταξινόμηση και φιλτράρισμα δεδομένων: Μπορείτε να χρησιμοποιήσετε το OrderPipe ή το FilterPipe για να ταξινομήσετε ή να φιλτράρετε τα δεδομένα σας.

Πώς να βρείτε το πρώτο σας Tweet

Τύποι Ενσωματωμένων Σωλήνων σε Angular

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

PercentPipe: Αυτός είναι ο σωλήνας που χρησιμοποιείται όταν θέλετε να μετατρέψετε έναν αριθμό σε συμβολοσειρά ποσοστού.
DatePipe: Αυτός είναι ο σωλήνας που χρησιμοποιείται για τη μορφοποίηση μιας τιμής ημερομηνίας με βάση τους τοπικούς κανόνες.
LowerCasePipe: Μετατρέψτε όλο το κείμενό σας σε πεζά χρησιμοποιώντας αυτόν τον σωλήνα.
UpperCasePipe: Μπορείτε να χρησιμοποιήσετε αυτόν τον σωλήνα όταν θέλετε να αλλάξετε όλο το κείμενό σας σε κεφαλαία.
CurrencyPipe: Είναι μια τέλεια επιλογή όταν θέλετε να αλλάξετε έναν αριθμό σε μια συμβολοσειρά νομίσματος με βάση τους τοπικούς κανόνες.
DecimalPipe: Αυτός ο σωλήνας χρησιμοποιεί κανόνες τοπικής ρύθμισης για να μετατρέψει έναν αριθμό σε συμβολοσειρά με υποδιαστολή.

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

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

Προαπαιτούμενα

Πριν ξεκινήσετε την κατασκευή προσαρμοσμένων σωλήνων στο Angular, χρειάζεστε τα εξής:

Περιβάλλον χρόνου εκτέλεσης Node.js για την εφαρμογή Angular. Μπορείς κατεβάστε το Node.js αν δεν το έχεις.
Κατανόηση του τρόπου λειτουργίας του Angular
Γωνιακό CLI για να δημιουργήσετε την εφαρμογή σας και να εκτελέσετε διαφορετικές εντολές. Μπορείτε να το εγκαταστήσετε χρησιμοποιώντας αυτήν την εντολή.

npm εγκατάσταση -g @angular/cli

Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε ένα προσαρμοσμένο Pipe στο Angular:

#1. Δημιουργήστε ένα νέο έργο Angular. Μπορείτε να χρησιμοποιήσετε αυτήν την εντολή για να ξεκινήσετε:

νέους σωλήνες

#2. Αλλάξτε τον κατάλογο στην εφαρμογή που δημιουργήσατε και ανοίξτε τον στον αγαπημένο σας επεξεργαστή κώδικα. Χρησιμοποιώ το VsCode. Μπορείτε να εκτελέσετε αυτές τις εντολές

σωλήνες cd && κωδικός .

Ο φάκελος του έργου σας θα είναι παρόμοιος με αυτόν.

#3. Δημιουργήστε έναν προσαρμοσμένο σωλήνα. Μπορείτε να χρησιμοποιήσετε αυτήν την εντολή για να δημιουργήσετε έναν νέο προσαρμοσμένο σωλήνα:

ng δημιουργία σωλήνα custom-pipe

Εάν ελέγξετε το φάκελο του έργου σας, θα σημειώσετε ότι έχουν δημιουργηθεί αυτά τα δύο αρχεία:

src/app/custom-pipe.pipe.spec.ts

src/app/custom-pipe.pipe.ts

#4. Προσδιορίστε τη λογική του σωλήνα

Ανοίξτε το αρχείο custom-pipe.pipe.ts και θα βρείτε αυτόν τον κωδικό:

Μπορούμε τώρα να δημιουργήσουμε μια απλή λογική όπου ο προσαρμοσμένος σωλήνας μας προσαρτάται σε μια συμβολοσειρά.

Μπορείτε να αλλάξετε τα περιεχόμενα του αρχείου σας να είναι?

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

#5. Καταχωρίστε τον προσαρμοσμένο σωλήνα. Ανοίξτε το αρχείο app.module.ts και ελέγξτε ότι έχετε @NgModule και μετά διακοσμητικά.

Πώς η «Ενοποιημένη μνήμη» επιταχύνει τους M1 ARM Mac της Apple

Επιβεβαιώστε ότι αυτό το αρχείο έχει αυτόν τον κωδικό.

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]
})

export class AppModule { }

#6. Ανοίξτε το app.component.html, διαγράψτε όλο το περιεχόμενο και προσθέστε αυτήν τη γραμμή.

<header>{{ '12345' | customPipe }}</header>

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

ng σερβίρετε

Αυτό θα εμφανίζεται στο πρόγραμμα περιήγησής σας.

Πώς να αλυσοδένετε σωλήνες στο Angular

Η αλυσίδα σωλήνων σάς επιτρέπει να εκτελείτε πολλαπλές λειτουργίες με μία μόνο έκφραση. Χρησιμοποιούμε τον χειριστή σωλήνα ( | ) για να συνδυάσουμε διαφορετικούς σωλήνες στο Angular.

Μπορούμε να αλυσοδένουμε σωλήνες για τους εξής λόγους:

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

Μπορείτε να αλυσιδώσετε τον προσαρμοσμένο σας σωλήνα με έναν άλλο ή έναν ενσωματωμένο σωλήνα. Μπορώ να αλυσοδύνω τον σωλήνα που δημιουργήσαμε νωρίτερα customPipe με ενσωματωμένο πεζό σωλήνα. Έτσι μπορούμε να το κάνουμε:

<p>{{ dataValue | customPipe | lowercase }}</p>

Pure vs. Impure Pipes

Υπάρχουν δύο τύποι σωλήνων στο Angular: καθαροί και ακάθαρτοι σωλήνες

Καθαροί σωλήνες

Οι σωλήνες στο Angular είναι καθαροί από προεπιλογή. Ένας καθαρός σωλήνας αναμένεται να επιστρέψει την ίδια έξοδο για την ίδια είσοδο. Ένας τέτοιος σωλήνας αναμένεται να είναι ντετερμινιστικός και ανιθαγενής.

Ο μηχανισμός ανίχνευσης αλλαγών της Angular βελτιστοποιεί αυτόματα τους καθαρούς σωλήνες. Το Angular δεν εκτελεί ξανά τον μετασχηματισμό σωλήνα εκτός εάν αλλάξει η είσοδος σε έναν καθαρό σωλήνα.

Έτσι δηλώνεις έναν σωλήνα ως καθαρό.

@Pipe({
  name: 'uppercase',
  pure: true

})

export class UppercasePipe {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Όπως μπορείτε να δείτε, έχουμε ορίσει την καθαρή ιδιότητα του διακοσμητή @Pipe σε true.

Ακάθαρτοι σωλήνες

Ένας ακάθαρτος σωλήνας θα εκτελείται κάθε φορά που το Angular ανιχνεύει μια αλλαγή. Μια τέτοια αλλαγή δεν χρειάζεται να προέρχεται από τις εισροές. Οι ακάθαρτοι σωλήνες ταιριάζουν σε καταστάσεις που απαιτούν πρόσβαση στην τρέχουσα κατάσταση της εφαρμογής. Η πρόσβαση σε μια βάση δεδομένων ή η υποβολή αιτήματος HTTP είναι τέλεια παραδείγματα όπου μπορείτε να χρησιμοποιήσετε ακάθαρτους σωλήνες.

12 καλύτερα ηλεκτρικά σκέιτμπορντ που πρέπει να αποκτήσετε αμέσως

Αυτό είναι ένα παράδειγμα ακάθαρτου σωλήνα:

@Pipe({
  name: 'sort',
  pure: false
})

export class SortPipe {
  transform(array: any[]): any[] {
    return array.sort();
  }
}

Όπως μπορείτε να δείτε, έχουμε ορίσει την καθαρή ιδιότητα του διακοσμητή @Pipe στο false να κάνει τον σωλήνα μας ακάθαρτο.

Δημιουργία σωλήνων στο Angular: Βέλτιστες πρακτικές

camelCase your pipes: Αν το έχετε σημειώσει, ονόμασα τον σωλήνα μου customPipe. Χρησιμοποιείτε πάντα αυτήν την προσέγγιση εάν ο σωλήνας σας έχει περισσότερες από μία λέξεις.
Δοκιμάστε τους σωλήνες σας: Η δημιουργία ενός σωλήνα δεν εγγυάται ότι θα λειτουργήσει. Ελέγχετε πάντα τους σωλήνες σας για να βεβαιωθείτε ότι λειτουργούν όπως αναμένεται. Μπορείτε να αυτοματοποιήσετε αυτή τη διαδικασία χρησιμοποιώντας διάφορες βιβλιοθήκες.
Αποφύγετε πολύπλοκους σωλήνες: Μπορεί να θέλετε ένας σωλήνας να εκτελεί περισσότερες από μία ενέργειες. Ωστόσο, αυτή δεν είναι καλή προσέγγιση και η καλύτερη πρακτική είναι η δημιουργία διαφορετικών σωλήνων για την εκτέλεση διαφορετικών ενεργειών.
Χρησιμοποιήστε καθαρούς σωλήνες: Ένας καθαρός σωλήνας θα επιστρέφει πάντα την ίδια έξοδο από την ίδια είσοδο. Το Angular μπορεί να αποθηκεύσει τα αποτελέσματα της κρυφής μνήμης για καθαρούς σωλήνες, γεγονός που οδηγεί σε βελτίωση της απόδοσης και του χρόνου απόκρισης.

Συχνές ερωτήσεις

Γιατί χρειαζόμαστε Pipes στο Angular;

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

Τι είναι ένας προσαρμοσμένος σωλήνας;

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

Δώστε παραδείγματα ενσωματωμένων σωλήνων στο Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe και PercentPipe

Τι είναι η αλυσίδα σωλήνων;

Η αλυσίδα σωλήνων είναι η διαδικασία συνδυασμού πολλών αλυσίδων. Η αλυσίδα σωλήνων σάς επιτρέπει να εκτελείτε πολλαπλές λειτουργίες με μία μόνο έκφραση. Χρησιμοποιούμε τον χειριστή σωλήνα ( | ) για να συνδυάσουμε διαφορετικούς σωλήνες στο Angular. Μπορείτε να αλυσιδώσετε προσαρμοσμένους σωλήνες με άλλους ή να τους αλυσιδώσετε με ενσωματωμένους σωλήνες

συμπέρασμα

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

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

Μπορείτε επίσης να εξερευνήσετε ορισμένες βιβλιοθήκες Angular UI για να δημιουργήσετε μια εμπειρία χρήστη παγκόσμιας κλάσης.