Διευκολύνετε τον μετασχηματισμό δεδομένων σε εφαρμογές Angular με τη βοήθεια των Angular pipes.

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

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

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

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

instagram viewer

Η Angular παρέχει αρκετούς ενσωματωμένους σωλήνες, συμπεριλαμβανομένων DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, Δεκαδικός σωλήνας, PercentPipe, JsonPipe, SlicePipe, και AsyncPipe. Παρέχει επίσης τη δυνατότητα δημιουργίας προσαρμοσμένων σωλήνων.

Κάθε ενσωματωμένος Angular σωλήνας εκτελεί μια μοναδική λειτουργία και μπορεί να σας βοηθήσει να μετατρέψετε δεδομένα.

DatePipe

ο DatePipe μορφές και οθόνες τις μεταβλητές ημερομηνίας και ώρας σε καθορισμένη μορφή, λαμβάνοντας υπόψη την τοποθεσία σας. Σε αντίθεση με άλλα πλαίσια που απαιτούν Πακέτα JavaScript για μορφοποίηση ημερομηνίας και ώρας, Angular χρησιμοποιεί το DatePipe. Χρησιμοποιώ DatePipe στην αίτησή σας, προσθέστε το σύμβολο σωλήνα (|) ακολουθούμενο από ημερομηνία και τυχόν πρόσθετες παραμέτρους.

Για παράδειγμα:

<p>Today's date is {{ currentDate | date }}p>

Σε αυτό το παράδειγμα, περνάτε το σημερινή ημερομηνία μεταβλητή μέσω του DatePipe, το οποίο στη συνέχεια το μορφοποιεί σύμφωνα με την προεπιλεγμένη μορφή ημερομηνίας. Εσείς ορίζετε το σημερινή ημερομηνία μεταβλητή στο αρχείο TypeScript του στοιχείου σας.

Εδώ είναι ένα παράδειγμα:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Μπορείτε επίσης να περάσετε πρόσθετες παραμέτρους στο DatePipe για να προσαρμόσετε την έξοδο:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Το μπλοκ κώδικα παραπάνω πέρασε το σύντομη ημερομηνία παράμετρος στο DatePipe. Αυτό λέει στο DatePipe για να μορφοποιήσετε την ημερομηνία χρησιμοποιώντας τη μορφή σύντομης ημερομηνίας. Παράλληλα με το σύντομη ημερομηνία παράμετρο, μπορείτε να διαμορφώσετε το DatePipe χρησιμοποιώντας διάφορες παραμέτρους, συμπεριλαμβανομένων z, longDateκαι προσαρμοσμένες μορφές ημερομηνίας όπως ηη/ΜΜ/ΕΕ.

UpperCasePipe και LowerCasePipe

ο UpperCasePipe και LowerCasePipe μεταμορφώστε τα κείμενά σας. Μετατρέπετε τα κείμενά σας σε κεφαλαία χρησιμοποιώντας το UpperCasePipe και πεζά χρησιμοποιώντας το LowerCasePipe.

Για να χρησιμοποιήσετε το UpperCasePipe και LowerCasePipe, προσθέστε το σύμβολο σωλήνα (|) ακολουθούμενο από πεζά να χρησιμοποιήσετε το LowerCasePipe ή κεφαλαίο να χρησιμοποιήσετε το UpperCasePipe.

Παρακάτω είναι ένα παράδειγμα του τρόπου χρήσης του UpperCasePipe και LowerCasePipe:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

CurrencyPipe

Χρησιμοποιώντας την CurrencyPipe, μπορείτε να μορφοποιήσετε αριθμούς σε ένα νόμισμα στην αίτησή σας. ο CurrencyPipe μορφοποιεί τους αριθμούς σύμφωνα με τις τοπικές ρυθμίσεις σας. Για να μορφοποιήσετε τους αριθμούς σας χρησιμοποιώντας το CurrencyPipe, χρησιμοποιήστε το σύμβολο σωλήνα που ακολουθείται από νόμισμα.

Για παράδειγμα:

<p>{{ number | currency }}p>

Σε αυτό το παράδειγμα, το CurrencyPipe μετατρέπει τη μεταβλητή αριθμού σε νόμισμα. Από προεπιλογή, το CurrencyPipe μετατρέπει τις μεταβλητές σε δολάρια. Για να το αλλάξετε αυτό, μπορείτε να διαμορφώσετε το CurrencyPipe για μετατροπή σε άλλα νομίσματα περνώντας πρόσθετες παραμέτρους.

Εδώ είναι ένα παράδειγμα:

<p>{{ number | currency: 'GBP' }}p>

Εδώ, περνάς το GBP παράμετρος στο CurrencyPipe. Αυτό διασφαλίζει ότι το αριθμός μεταβλητή μετατρέπει στο νόμισμα Λίρα Μεγάλης Βρετανίας.

DecimalPipe και PercentPipe

ο Δεκαδικός σωλήνας μετατρέπει τους αριθμούς σας σε δεκαδικούς, ενώ το PercentPipe μετατρέπει τους αριθμούς σας σε ποσοστά.

Για να χρησιμοποιήσετε το Δεκαδικός σωλήνας, χρησιμοποιήστε το σύμβολο σωλήνα που ακολουθείται από αριθμός και πρόσθετες παραμέτρους. Για να χρησιμοποιήσετε το PercentPipe, κάντε το ίδιο αλλά αντικαταστήστε το αριθμός με τοις εκατό χωρίς πρόσθετες παραμέτρους.

Για παράδειγμα:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Οι πρόσθετες παράμετροι μεταβιβάστηκαν στο Δεκαδικός σωλήνας ελέγξτε τον αριθμό των ακεραίων και κλασματικών ψηφίων που εμφανίζονται. ο 1 Η παράμετρος καθορίζει ότι πρέπει να υπάρχει τουλάχιστον ένα ακέραιο ψηφίο. Συγκριτικά, το 2.3 Η παράμετρος καθορίζει ότι πρέπει να υπάρχουν τουλάχιστον δύο και έως τρία κλασματικά ψηφία.

JsonPipe

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

Η σύνταξη για τη χρήση του JsonPipe είναι όπως ακολουθεί:

{{ expression | json }}

Εδώ, έκφραση είναι τα δεδομένα που θέλετε να μετατρέψετε σε μορφή JSON. Ο χειριστής σωλήνων (|) εφαρμόζει το JsonPipe στην έκφραση.

Για παράδειγμα, ορίστε ένα αντικείμενο και έναν πίνακα στο στοιχείο σας:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})


exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };


 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Το μπλοκ κώδικα παραπάνω ορίζει α χρήστης αντικείμενο και α προφίλ πίνακας. Τώρα, μπορείτε να χρησιμοποιήσετε το JsonPipe για να μετατρέψετε το αντικείμενο και τον πίνακα σε JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

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

SlicePipe

ο SlicePipe μοιάζει πολύ με το JavaScript φέτα() μέθοδος. ο SlicePipe μορφοποιεί πίνακες ή συμβολοσειρές εξάγοντας τα στοιχεία τους για τη δημιουργία νέων πινάκων ή συμβολοσειρών.

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

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

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

Σε αυτό το παράδειγμα, το SlicePipe θα εξαγάγει τα δύο πρώτα στοιχεία από το σειρά μεταβλητή, το στοιχείο στο δείκτη 0 και το στοιχείο στο δείκτη 1. Επιπλέον, θα εξαγάγει το πρώτο στοιχείο από το πίνακας μεταβλητός. ο SlicePipe είναι χρήσιμο όταν θέλετε να εμφανίσετε μόνο ένα τμήμα δεδομένων στο πρότυπο.

AsyncPipe

AsyncPipe είναι ένας ενσωματωμένος γωνιακός σωλήνας που εγγράφεται αυτόματα και διαγράφεται σε ένα Observable ή Promise. Επιστρέφει την πιο πρόσφατη τιμή που εκπέμπεται από το Observable ή το Promise.

Η σύνταξη για χρήση AsyncPipe είναι όπως ακολουθεί:

{{ expression | async }}

Εδώ, η έκφραση είναι το Observable ή Promise στο οποίο θέλετε να εγγραφείτε.

Για παράδειγμα:

let numbers = of(1, 2, 3, 4, 5);

Μπορείς να χρησιμοποιήσεις AsyncPipe για να εγγραφείτε σε αυτό το Observable και να εμφανίσετε την πιο πρόσφατη τιμή που εκπέμπεται ως εξής:

<p>{{ numbers | async }}p>

Αυτό το μπλοκ κώδικα θα παράγει τον πιο πρόσφατο αριθμό που εκπέμπεται από το Observable. AsyncPipe είναι πολύ χρήσιμο όταν χειρίζεστε ασύγχρονες λειτουργίες στα πρότυπά σας. Εγγράφεται αυτόματα στο Observable ή στο Promise όταν το στοιχείο αρχικοποιείται και καταργείται όταν καταστρέφεται.

Αλυσίδα σωλήνων σε Angular

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

Εδώ είναι η βασική σύνταξη:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Για παράδειγμα, μπορείτε να μετατρέψετε ένα αντικείμενο ημερομηνίας σε συμβολοσειρά χρησιμοποιώντας το DatePipe και στη συνέχεια μετατρέψτε αυτήν τη συμβολοσειρά σε κεφαλαία χρησιμοποιώντας το UpperCasePipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Δημιουργήστε δυναμικές εφαρμογές χρησιμοποιώντας σωλήνες

Οι σωλήνες είναι μια ισχυρή δυνατότητα στο Angular που σας επιτρέπει να μετασχηματίζετε δεδομένα πριν εμφανιστούν στην προβολή. Εδώ, μάθατε για τις διάφορες προσφορές ενσωματωμένων σωλήνων Angular, όπως DatePipe, CurrencyPipe, UpperCasePipe κ.λπ. Μάθατε επίσης πώς να τα χρησιμοποιείτε στην εφαρμογή σας για να δημιουργήσετε πιο δυναμικό περιεχόμενο. Χρησιμοποιώντας pipes, οι προγραμματιστές μπορούν να δημιουργήσουν πιο ευέλικτες και δυναμικές εφαρμογές web με λιγότερο κώδικα.