Χρησιμοποιήστε προσαρμοσμένους σωλήνες για να μορφοποιήσετε τα δεδομένα σας όπως τα χρειάζεστε.
Το Pipes είναι μια ισχυρή δυνατότητα Angular που σας επιτρέπει να μεταμορφώνετε και να μορφοποιείτε δεδομένα στην εφαρμογή σας. Παρέχουν έναν βολικό τρόπο χειρισμού δεδομένων πριν από την εμφάνιση τους στον χρήστη, κάνοντας την εφαρμογή σας πιο δυναμική και φιλική προς το χρήστη.
Η Angular προσφέρει μια ποικιλία από ενσωματωμένους σωλήνες όπως DatePipe, CurrencyPipe και UpperCasePipe. Μαζί με τους ενσωματωμένους σωλήνες που προσφέρει η Angular, μπορείτε να δημιουργήσετε προσαρμοσμένους σωλήνες για να μετατρέψετε δεδομένα με όποιον τρόπο χρειάζεστε.
Ρύθμιση του Angular Project σας
Πριν δημιουργήσετε προσαρμοσμένους σωλήνες, βεβαιωθείτε ότι κατανοούν τους σωλήνες στο Angular. Για να μπορέσετε να ρυθμίσετε ένα έργο Angular, βεβαιωθείτε ότι έχετε εγκαταστήσει το Angular CLI στον υπολογιστή σας. Μπορείτε να το εγκαταστήσετε με npm (Node Package Manager).
Εγκαταστήστε το Angular CLI εκτελώντας την ακόλουθη εντολή:
npm install -g @angular/cli
Στη συνέχεια, δημιουργήστε ένα νέο έργο Angular εκτελώντας αυτήν την εντολή:
ng new my-app
Αφού δημιουργήσετε το έργο, μεταβείτε στον κατάλογο του έργου σας και ανοίξτε την εφαρμογή σας στο IDE σας.
Δημιουργήστε έναν προσαρμοσμένο σωλήνα
Τώρα που έχετε ρυθμίσει την εφαρμογή Angular, το επόμενο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε έναν προσαρμοσμένο σωλήνα. Για να δημιουργήσετε έναν προσαρμοσμένο σωλήνα, πρέπει να δημιουργήσετε έναν νέο χρησιμοποιώντας το Angular CLI.
Για να το κάνετε αυτό, εκτελέστε την ακόλουθη εντολή στον κατάλογο της εφαρμογής σας στο τερματικό:
ng generate pipe customPipe
Αυτή η εντολή θα δημιουργήσει δύο αρχεία με όνομα custom-pipe.pipe.ts και custom-pipe.pipe.spec.ts στο src/app Ευρετήριο. Το αρχείο custom-pipe.pipe.ts είναι ένα αρχείο TypeScript που περιέχει τον κωδικό για τον καθορισμό του προσαρμοσμένου σωλήνα σας. Θα χρησιμοποιήσετε το custom-pipe.pipe.spec.ts για να εκτελέσετε δοκιμές στον προσαρμοσμένο σωλήνα.
Στο custom-pipe.pipe.ts αρχείο, θα βρείτε αυτές τις γραμμές κώδικα:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
}
}
Αυτό το μπλοκ κώδικα εισάγει το Σωλήνας διακοσμητής και η PipeTransform διεπαφή από το @γωνιακός/πυρήνας μονάδα μέτρησης. Ο διακοσμητής Pipe ορίζει τα μεταδεδομένα για τον σωλήνα και η κλάση σωλήνα υλοποιεί τη διεπαφή PipeTransform.
Στο CustomPipePipe τάξη, εφαρμόζετε το PipeTransform διεπαφή, η οποία απαιτεί την υλοποίηση του μεταμορφώνω μέθοδος. Η μέθοδος μετασχηματισμού είναι υπεύθυνη για τον μετασχηματισμό της τιμής εισόδου.
ο μεταμορφώνω Η μέθοδος παίρνει δύο παραμέτρους, αξία και args. Η παράμετρος τιμή αντιπροσωπεύει την τιμή μετασχηματισμού του σωλήνα και η παράμετρος args αντιπροσωπεύει προαιρετικές παραμέτρους που μπορεί να θέλετε να προσθέσετε.
Τώρα καταλάβατε το boilerplate του custom-pipe.pipe.ts αρχείο, αντικαταστήστε το μπλοκ κώδικα παραπάνω με αυτόν τον κωδικό:
import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
Σε αυτό το μπλοκ κώδικα, το μεταμορφώνω μέθοδος παίρνει το αξία παράμετρος του τύπου σειρά ως όρισμα και επιστρέφει μια σειρά από συμβολοσειρές. Η μέθοδος μετασχηματισμού χωρίζει τη συμβολοσειρά εισόδου σε έναν πίνακα μεμονωμένων χαρακτήρων χρησιμοποιώντας το διαίρεση μέθοδο και επιστρέφει τον πίνακα που προκύπτει.
Ενσωμάτωση του προσαρμοσμένου σωλήνα στην εφαρμογή σας
Έχετε δημιουργήσει με επιτυχία τον προσαρμοσμένο σωλήνα σας και μπορείτε πλέον να τον χρησιμοποιήσετε στα Angular πρότυπά σας. Πριν χρησιμοποιήσετε τον προσαρμοσμένο σωλήνα στην εφαρμογή σας, εισαγάγετε και δηλώστε τον στην εφαρμογή σας app.module.ts αρχείο. Για να το κάνετε αυτό, αντικαταστήστε τον κώδικα στο app.module.ts με τον ακόλουθο:
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 { }
Τώρα μπορείτε να χρησιμοποιήσετε το σωλήνα στα πρότυπά σας. Ανοιξε το app.component.html αρχείο και προσθέστε τον ακόλουθο κώδικα:
<p>{{ 'apple' | CustomPipe }}p>
Σε αυτό το παράδειγμα, χρησιμοποιείτε το CustomPipe σωλήνα για να μεταμορφώσει τη χορδή 'μήλο' σε έναν πίνακα συμβολοσειρών.
Δοκιμάστε τον προσαρμοσμένο σωλήνα σας
Για να δείτε τον προσαρμοσμένο σωλήνα σας σε δράση, εκτελέστε τον διακομιστή ανάπτυξης Angular. Μπορείτε να το κάνετε αυτό εκτελώντας την ακόλουθη εντολή τερματικού:
ng serve
Ανοίξτε το πρόγραμμα περιήγησής σας και μεταβείτε σε http://localhost: 4200. Θα πρέπει να δείτε τη μετασχηματισμένη συμβολοσειρά που εμφανίζεται στη σελίδα:
Μεταφέρετε τις Angular Εφαρμογές σας στο επόμενο επίπεδο
Το Pipes είναι ένα ισχυρό εργαλείο Angular που σας επιτρέπει να μετασχηματίζετε και να μορφοποιείτε δεδομένα στην εφαρμογή σας. Μπορείτε να δημιουργήσετε προσαρμοσμένους σωλήνες για να ταιριάζουν στις συγκεκριμένες ανάγκες σας και να κάνετε την Angular εφαρμογή σας πιο δυναμική.
Ένας άλλος τρόπος για να μεταφέρετε τις εφαρμογές σας Angular στο επόμενο επίπεδο είναι να κατανοήσετε τη δρομολόγηση στο Angular. Η δρομολόγηση είναι μια βασική έννοια που σας επιτρέπει να ελέγχετε τον τρόπο πλοήγησης των χρηστών στην εφαρμογή σας. Κατανοώντας τη δρομολόγηση, μπορείτε να δημιουργήσετε εφαρμογές μιας σελίδας που είναι πιο φιλικές προς το χρήστη και αποτελεσματικές.