Εισαγωγή
Κατά τη δημιουργία εφαρμογών, ενδέχεται να υπάρχουν σενάρια όπου θέλουμε να περάσουμε ορισμένα ορίσματα ή παραμέτρους για να περιγράψουμε τη συμπεριφορά της διαδρομής. Στο Angular, αυτές ονομάζονται query παράμετροι, και είναι προαιρετικές. Οι παράμετροι query δεν πρέπει να συγχέονται με τις κανονικές διαδρομής παραμέτρους που είναι υποχρεωτικές παράμετροι και συνδέονται με μία μόνο διαδρομή.
Για να αποσαφηνίσετε τη διαφορά μεταξύ των παραμέτρων διαδρομής και των παραμέτρων query, φανταστείτε ότι δημιουργείτε μια εφαρμογή που αποθηκεύει προϊόντα. Μπορείτε να έχετε μια διαδρομή που ανοίγει οποιοδήποτε συγκεκριμένο προϊόν χρησιμοποιώντας το product_id. Μπορείτε επίσης να καθορίσετε μια παράμετρο query: read_only. Όταν το read_only έχει οριστεί σε true, ο χρήστης μπορεί μόνο να δει την εγγραφή, ενώ όταν το read_only είναι false, ο χρήστης μπορεί επίσης να επεξεργαστεί την εγγραφή. Με αυτόν τον τρόπο, χρησιμοποιώντας μόνο μία διαδρομή, μπορούν να αντιμετωπιστούν και οι δύο περιπτώσεις χρήσης (επεξεργασία και προβολή). Εδώ το product_id είναι η παράμετρος διαδρομής και το read_only το οποίο είναι προαιρετικό είναι η query παράμετρος.
Προαπαιτούμενα
Για να κατανοήσετε πλήρως αυτό το άρθρο, απαιτείται εξοικείωση με τη δημιουργία εφαρμογών με χρήση του Angular. Η εμπειρία με τα Angular Router, RouterLink και ActivatedRoute θα είναι επίσης χρήσιμη.
Πέρασμα παραμέτρων Query με το Router.navigate
Εάν χρησιμοποιείτε το Router.navigate για να πλοηγηθείτε στις διαδρομές, χρησιμοποιήστε το queryParams για να στείλετε τις παραμέτρους query.
Στο παραπάνω παράδειγμα, εάν θέλουμε οι επισκέπτες να βλέπουν τη λίστα των προϊόντων ταξινομημένη κατά δημοτικότητα, θα χρησιμοποιήσουμε τον παρακάτω κώδικα:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
Χρησιμοποιώντας αυτόν τον κώδικα, η διεύθυνση URL θα γίνει:
|
1 |
http://localhost:4200/products?order=popular |
Ωστόσο, μπορεί να υπάρξουν σενάρια όπου πρέπει να περάσουμε πολλαπλές παραμέτρους κατά την πλοήγηση. Για παράδειγμα, εάν θέλουμε να ταξινομήσουμε τα προϊόντα κατά δημοτικότητα αλλά και κατά τιμή, μπορούμε να χρησιμοποιήσουμε τον παρακάτω κώδικα:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
Αυτή τη φορά η διεύθυνση URL θα γίνει η εξής:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Αυτό ολοκληρώνει τον τρόπο ορισμού των παραμέτρων query χρησιμοποιώντας το queryParams.
Αποτροπή απώλειας των παραμέτρων Query με τη χρήση του queryParamsHandling
Κατά την πλοήγηση μεταξύ διαδρομών, οι παράμετροι τείνουν να χάνονται. Ας υποθέσουμε ότι αν περάσουμε ένα όρισμα arg0 αυτό δεν θα περάσει όταν πραγματοποιηθεί η επόμενη δρομολόγηση. Μπορούμε να αποθηκεύσουμε τις παραμέτρους χρησιμοποιώντας το queryParamsHandling και ορίζοντας την τιμή σε preserve ή merge.
Στο παραπάνω παράδειγμα, ας υποθέσουμε ότι θέλουμε να κατευθύνουμε τους επισκέπτες στη σελίδα brands από το product με παράμετρο διαδρομής { order: 'popular' }, διατηρώντας παράλληλα τις παραμέτρους διαδρομής. Για να το κάνουμε αυτό, μπορούμε να χρησιμοποιήσουμε το queryParamsHandling και να το ορίσουμε σε preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
Αυτό θα κάνει τη διεύθυνση URL να μοιάζει με:
|
1 |
http://localhost:4200/users?brand=popular |
Στη συνέχεια, ας υποθέσουμε ότι θέλουμε να διατηρήσουμε την παράμετρο query της προηγούμενης διαδρομής { order: 'popular' } ενώ προσθέτουμε νέες παραμέτρους { price: 'high-to-low' }. Μπορούμε να ορίσουμε το queryParamsHandling σε merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
Με τον παραπάνω κώδικα, η διεύθυνση URL θα γίνει:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
Εδώ ολοκληρώνουμε τη διατήρηση των παραμέτρων ερωτήματος χρησιμοποιώντας queryParamsHandling για διατήρηση ή συγχώνευση.
Πέρασμα παραμέτρων ερωτήματος με το RouterLink
Λαμβάνοντας υπόψη τον προηγούμενο σύνδεσμό μας, αν θέλουμε να χρησιμοποιήσουμε την οδηγία RouterLink για πλοήγηση, θα πρέπει να περάσουμε τις παραμέτρους ερωτήματος χρησιμοποιώντας το queryParams όπως παρακάτω:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> Προϊόντα </a> |
Παρατηρήστε πώς περνάμε το αντικείμενο στο queryParams χρησιμοποιώντας τη μονόδρομη δέσμευση. Μπορούμε επίσης να περάσουμε ένα ολόκληρο αντικείμενο ως queryParams .
Επιπλέον, αν θέλουμε να μεταφέρουμε αυτές τις παραμέτρους ερωτήματος σε επόμενη πλοήγηση, μπορούμε να χρησιμοποιήσουμε την επιλογή queryParamsHandling. Οι πιθανές επιλογές του queryParamsHandling είναι merge και preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">Προϊόντα</a> |
Εδώ, είδαμε πώς να περάσουμε το queryParams και τον χειρισμό των παραμέτρων χρησιμοποιώντας το queryParamsHandling στο RouterLink.
Ανάγνωση τιμών παραμέτρων ερωτήματος
Μέχρι τώρα έχουμε μάθει πώς να περνάμε τις παραμέτρους ερωτήματος στη διαδρομή. Αυτές οι παράμετροι ήταν προαιρετικές και χρησιμοποιούνταν για τη μεταφορά κάποιων πληροφοριών στη σελίδα προορισμού. Η αποστολή των παραμέτρων είναι το ένα μέρος, αλλά είναι επίσης απαραίτητο να διαβάσουμε τις παραμέτρους από τη διεύθυνση URL και να τις χρησιμοποιήσουμε.
Στο Angular, διαβάζουμε τις παραμέτρους ερωτήματος της διαδρομής χρησιμοποιώντας την κλάση ActivatedRoute. Η ActivatedRoute έχει μια παρατηρήσιμη ιδιότητα που ονομάζεται queryParams για να αποκαλύψει τις παραμέτρους της τρέχουσας διεύθυνσης URL.
Ας υποθέσουμε ότι έχουμε να κάνουμε με την ακόλουθη διεύθυνση URL:
|
1 |
http://localhost:4200/products?order=popular |
Για να αποκτήσουμε πρόσβαση στην παράμετρο ερωτήματος order στον κώδικα, χρησιμοποιούμε τον παρακάτω κώδικα:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent implements OnInit { order: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => { console.log(params); // { order: "popular" } this.order = params.order; }); } } |
Εδώ στην κονσόλα, θα δούμε την τιμή της order παραμέτρου ερωτήματος “popular” εκτυπώνεται. Εάν έχουμε πολλαπλές παραμέτρους ερωτήματος, μπορούμε να χρησιμοποιήσουμε την queryParamMap ιδιότητα η οποία επιστρέφει ένα observable paramsMap αντικείμενο.
Αν έχουμε τη διεύθυνση URL με πολλαπλές παραμέτρους ερωτήματος όπως:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
Μπορούμε να έχουμε πρόσβαση σε αυτές τις παραμέτρους ερωτήματος χρησιμοποιώντας τον παρακάτω κώδικα:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
Χρησιμοποιώντας τον τελεστή διασποράς αντικειμένου εδώ, παίρνουμε το παρακάτω αποτέλεσμα:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
Τέλος, θα πρέπει να είστε σε θέση να κατανοήσετε πώς να αποκτήσετε πρόσβαση στις παραμέτρους ερωτήματος από τις προκύπτουσες διαδρομές.
Συμπέρασμα
Σε αυτό το σεμινάριο, εξετάσαμε τη διαφορά μεταξύ των παραμέτρων ερωτήματος και των παραμέτρων διαδρομής. Επίσης, εξετάσαμε πώς να περάσουμε τα ορίσματα στις διαδρομές ως παραμέτρους ερωτήματος και επίσης να τα ανακτήσουμε πίσω στη σελίδα χρησιμοποιώντας queryParams και queryParamsHandling με Router.navigate και RouterLink. Μάθαμε επίσης πώς να χειριζόμαστε queryParams και queryParamMap με ActivatedRoute.
Το Angular απαιτεί JavaScript στη βάση του. Εάν θέλετε να διευρύνετε τις γνώσεις σας σχετικά με τη JavaScript, μπορείτε να δείτε τα παρακάτω ιστολόγια:
- Εργασία με τη JavaScript: Πώς λειτουργούν οι κλάσεις
- Εργασία με τη JavaScript: Πώς λειτουργούν τα πρωτότυπα και οι κληρονομικότητες
- JavaScript: Ένας οδηγός για την ευρετηρίαση, τον διαχωρισμό και τον χειρισμό συμβολοσειρών
Καλό προγραμματισμό!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.