|
|
Δημοσιεύτηκε στις 25/10/2018 3:52:29 μ.μ.
|
|
|
Εισαγωγή στις εντολές RouterLink
Η εντολή RouterLink σάς επιτρέπει να συνδεθείτε σε ένα συγκεκριμένο τμήμα της εφαρμογής σας. Εάν ο σύνδεσμος είναι στατικός, μπορούμε να χρησιμοποιήσουμε την εντολή με τον ακόλουθο τρόπο:
Εάν χρειάζεται να δημιουργήσετε διευθύνσεις συνδέσμων με δυναμικές τιμές, μπορείτε να μεταβιβάσετε έναν πίνακα τμημάτων διαδρομής και, στη συνέχεια, τις παραμέτρους για κάθε τμήμα. Για παράδειγμα, η χρήση ενός πίνακα ['/team', teamId, 'user', userName, {details: true}] σημαίνει ότι θέλουμε να δημιουργήσουμε έναν σύνδεσμο προς το /team/11/user/bob. details=true 。
Πολλά στατικά τμήματα μπορούν να συγχωνευθούν σε ένα, π.χ. ['/team/11/user', userName, {details: true}].
Το πρώτο τμήμα διαδρομής μπορεί να οριστεί ως /, ./, ή . / Αρχή:
- Εάν ξεκινά με /, η διαδρομή θα αρχίσει να αναζητά προς τα πάνω από τη ριζική διαδρομή
- Εάν ξεκινά με ./ ή δεν χρησιμοποιείται, η δρομολόγηση θα αρχίσει να αναζητά από τη θυγατρική δρομολόγηση που είναι ενεργή αυτήν τη στιγμή για την πορεία
- Αν ξεκινήσετε με : / αρχίζει, η διαδρομή πηγαίνει στο επόμενο επίπεδο αναζήτησης
Μπορείτε να ορίσετε παραμέτρους ερωτήματος και τμήματα με τους ακόλουθους τρόπους:
Η εντολή RouterLink θα δημιουργήσει τον ακόλουθο σύνδεσμο με βάση τις παραμέτρους εισόδου που ορίστηκαν παραπάνω: /user/bob#education?debug=true. Επιπλέον, μπορούμε να δηλώσουμε τον τρόπο χειρισμού των παραμέτρων του ερωτήματος μέσω της ιδιότητας queryParamsHandling, οι διαθέσιμες επιλογές είναι:
- merge - Συγχώνευση υπαρχόντων queryParams στο τρέχον queryParams
- διατήρηση - Αποθήκευση του τρέχοντος ερωτήματοςParams
- προεπιλογή ('') - Χρήση μόνο παραμέτρων ερωτήματος
Συγκεκριμένα παραδείγματα χρήσης είναι τα εξής:
Η εντολή RouterLink εξηγείται λεπτομερώς
Ορισμός εντολής RouterLink
Ιδιότητα εισαγωγής εντολής RouterLink
Ορίστε τις παραμέτρους ερωτήματος που σχετίζονται με τη διεύθυνση URL
@Input() queryParams: {[k: string]: οποιαδήποτε};
Ορίστε το τμήμα κατακερματισμού στη διεύθυνση URL
@Input() θραύσμα: συμβολοσειρά;
Ορισμός της λειτουργίας επεξεργασίας παραμέτρων ερωτήματος: συγχώνευση, διατήρηση και προεπιλογή
@Input() queryParamsHandling: QueryParamsHandling;
Ορίζει εάν θα διατηρούνται τμήματα
@Input() διατήρησηΘραύσμα: boolean;
Κατά τη ρύθμιση της περιήγησης στη σελίδα, εάν θέλετε να προσθέσετε νέες καταστάσεις στο ιστορικό
@Input() skiplocatio{filter}nΑλλαγή: boolean;
Κατά τη ρύθμιση της περιήγησης σελίδας, εάν θα αντικατασταθεί η τρέχουσα κατάσταση στο ιστορικό
@Input() αντικατάστασηUrl: boolean;
Ορίστε πληροφορίες παραμέτρων εντολών, για παράδειγμα: ['/user/bob']
@Input()
set routerLink(εντολές: any[]|string) {
if (εντολές != null) {
this.commands = Array.isArray(εντολές) ? εντολές : [εντολές];
} αλλιώς {
this.commands = [];
}
}
Σύνδεση εντολών RouterLink
Δέσμευση συμβάντων
Κλάση RouterLink
@Attribute()
@Attribute('attributeName') διακοσμητής: Χρησιμοποιείται για τη λήψη της τιμής του χαρακτηριστικού που αντιστοιχεί στο όνομα του χαρακτηριστικού attributeName στο στοιχείο κεντρικού υπολογιστή της εντολής.
tabindex
Η ιδιότητα tabindex καθορίζει τη σειρά ελέγχου του πλήκτρου tab ενός στοιχείου (όταν το πλήκτρο tab χρησιμοποιείται για περιήγηση).
Τα ακόλουθα στοιχεία υποστηρίζουν χαρακτηριστικά tabindex: <a>, <area><button>, <input><object><select> , , , και <textarea> .
Σύνταξη tabindex:
Κλάση RouterLink
Κλάση RouterLink
Εντολή RouterLinkWithHref
Οδηγία RouterLinkWithHref
Ιδιότητα εισόδου οδηγίας RouterLinkWithHref
Εντολή RouterLinkWithHref
Σύνδεση χαρακτηριστικών
<a> Οι ετικέτες ορίζουν υπερσυνδέσμους που χρησιμοποιούνται για τη σύνδεση από τη μια σελίδα στην άλλη. <a> Υπάρχουν δύο σημαντικά χαρακτηριστικά στις ετικέτες:
href - καθορίζει τη διεύθυνση URL της σελίδας στην οποία οδηγεί ο σύνδεσμος. Εάν δεν χρησιμοποιείτε το χαρακτηριστικό href, δεν μπορείτε να χρησιμοποιήσετε τα ακόλουθα χαρακτηριστικά: download, media, rel, target και type.
Target - καθορίζει τον τρόπο με τον οποίο ανοίγει η συνδεδεμένη σελίδα στο παράθυρο του προγράμματος περιήγησης και οι τιμές των παραμέτρων της είναι κυρίως οι εξής:
_blank - Φορτώστε το έγγραφο προορισμού σε ένα νέο παράθυρο του προγράμματος περιήγησης.
_parent - Αυτός ο στόχος προκαλεί τη φόρτωση του εγγράφου στο γονικό παράθυρο ή στο σύνολο πλαισίων που περιέχει το πλαίσιο στο οποίο αναφέρεται η υπερ-σύνδεση. Εάν αυτή η αναφορά βρίσκεται σε ένα παράθυρο ή σε ένα πλαίσιο ανώτατου επιπέδου, τότε είναι ισοδύναμη με το _self-στόχο.
_self - Η τιμή αυτού του προορισμού είναι ο προεπιλεγμένος προορισμός για όλες τις ετικέτες που δεν καθορίζουν προορισμό, <a> γεγονός που προκαλεί τη φόρτωση και την εμφάνιση του εγγράφου προορισμού ως έγγραφο προέλευσης στο ίδιο πλαίσιο ή παράθυρο. Αυτός ο προορισμός είναι περιττός και περιττός, εκτός εάν <base> χρησιμοποιείται με το χαρακτηριστικό target στην καρτέλα τίτλου εγγράφου.
_top - Αυτός ο στόχος αναγκάζει το έγγραφο να φορτώσει το παράθυρο που περιέχει την υπερ-σύνδεση και η χρήση του προορισμού _top θα διαγράψει όλα τα πλαίσια που περιλαμβάνονται και θα φορτώσει το έγγραφο σε ολόκληρο το παράθυρο του προγράμματος περιήγησης.
Δέσμευση συμβάντων
Το MouseEvent αντιπροσωπεύει ένα συμβάν που συμβαίνει όταν ένας χρήστης αλληλεπιδρά με μια συσκευή δείκτη (όπως ένα ποντίκι) και τα κοινά συμβάντα περιλαμβάνουν: συμβάντα κλικ, dblclick, mouseup και mousedown. Το αντικείμενο MouseEvent περιέχει ένα χαρακτηριστικό κουμπιού που αντιπροσωπεύει το κουμπί του ποντικιού που πατήθηκε από το χρήστη και οι πιθανές τιμές χαρακτηριστικών είναι οι εξής:
- 0 - Πατιέται το κύριο κουμπί, που συνήθως αναφέρεται στο αριστερό κουμπί του ποντικιού.
- 1 - Πατιέται το βοηθητικό κουμπί, που συνήθως αναφέρεται στον τροχό του ποντικιού.
- 2 - Πατιέται το δεύτερο πλήκτρο, που συνήθως αναφέρεται στο δεξί κουμπί του ποντικιού.
- 3 - Πατιέται το τέταρτο κουμπί, που συνήθως αναφέρεται στο κουμπί επιστροφής του προγράμματος περιήγησης.
- 4 - Πατιέται το πέμπτο κουμπί, που συνήθως αναφέρεται στο κουμπί προώθησης του προγράμματος περιήγησης.
Για ένα ποντίκι που έχει ρυθμιστεί για αριστερόχειρα, τα πλήκτρα θα είναι το αντίθετο. Σε αυτήν την περίπτωση, η τιμή διαβάζεται από δεξιά προς τα αριστερά. Στο παραπάνω παράδειγμα κώδικα, έχουμε επίσης πρόσβαση στις ιδιότητες ctrlKey και metaKey του αντικειμένου MouseEvent, οι οποίες περιέχουν τις ιδιότητες altKey και shiftKey εκτός από αυτές τις δύο ιδιότητες. Αυτά τα χαρακτηριστικά περιγράφονται παρακάτω:
- MouseEvent.ctrlKey - επιστρέφει true εάν πατηθεί το πλήκτρο ελέγχου όταν ενεργοποιείται το συμβάν του ποντικιού.
- MouseEvent.metaKey - επιστρέφει true εάν πατηθεί το πλήκτρο (Window - ⊞, Mac - ⌘ Command) όταν ενεργοποιείται το συμβάν του ποντικιού.
- MouseEvent.altKey - Επιστρέφει true όταν ενεργοποιείται το συμβάν του ποντικιού, εάν πατηθεί το πλήκτρο (Window - alt, Mac - Option ή ⌥ ).
- MouseEvent.shiftKey - Επιστρέφει true εάν πατηθεί το πλήκτρο shift όταν ενεργοποιείται ένα συμβάν του ποντικιού.
Εάν πατήσετε ctrlKey και στη συνέχεια κάνετε κλικ στην καρτέλα, <a> θα δημιουργηθεί μια νέα σελίδα καρτέλας χρησιμοποιώντας την τρέχουσα διεύθυνση URL. Εάν πατήσετε το πλήκτρο metaKey και στη συνέχεια κάνετε κλικ στην <a> καρτέλα, η τρέχουσα σελίδα θα ανανεωθεί. Επομένως, στη μέθοδο onClick() εκτελείται η αντίστοιχη κρίση.
Κύκλος ζωής εντολών RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Κλάση RouterLinkWithHref
Κλάση RouterLinkWithHref
Κλάση RouterLinkWithHref
Εισαγωγή στην εντολή RouterLinkActive
Η οδηγία RouterLinkActive σάς επιτρέπει να προσθέσετε CSS σε ένα στοιχείο όταν ενεργοποιηθεί η συνδεδεμένη διαδρομή. Ρίξτε μια ματιά στο παρακάτω παράδειγμα:
Όταν η διεύθυνση URL είναι /user ή /user/bob, η κλάση active-link θα προστεθεί <a> στην ετικέτα. Αν αλλάξει η διεύθυνση URL, η κλάση active-link καταργείται αυτόματα από την <a> ετικέτα. Μπορείτε επίσης να προσθέσετε πολλές τάξεις ταυτόχρονα, ως εξής:
Κατά την εφαρμογή της εντολής routerLinkActive, μπορείτε επίσης να χρησιμοποιήσετε την παράμετρο routerLinkActiveOptions για να διαμορφώσετε τον τρόπο αντιστοίχισης των διευθύνσεων URL, ως εξής:
Όταν έχει ρυθμιστεί η παράμετρος {exact: true}, η κλάση active-link προστίθεται στην ετικέτα μόνο εάν η διεύθυνση URL ταιριάζει ακριβώς <a> . Μπορείτε επίσης να αντιστοιχίσετε μια παρουσία RouterLinkActive σε μια μεταβλητή προτύπου και να ελέγξετε την κατάσταση isActive των οδηγιών εντολών κατευθυντικά:
Τέλος, μπορείτε επίσης να εφαρμόσετε την εντολή RouterLinkActive στο γονικό στοιχείο του RouterLink. Τα παραδείγματα περιλαμβάνουν:
Στο παραπάνω παράδειγμα, όταν η διεύθυνση URL απευθύνεται ως /user/jim ή /user/bob, η κλάση active-link προστίθεται <div> στο αντίστοιχο στοιχείο.
Η εντολή RouterLinkActive εξηγείται λεπτομερώς
Ορισμός εντολής RouterLinkActive
Ιδιότητα εισόδου εντολής RouterLinkActive
Κύκλος ζωής εντολών RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Κλάση RouterLinkActive
Κλάση RouterLinkActive
Κλάση RouterLinkActive
|
Προηγούμενος:Υπάρχει μια λειτουργία εδώ που είναι πολύ καλή, μπορείς να βγάλεις χρήματα, είναι προώθηση.Επόμενος:Κυκλοφόρησε ένα πρόσθετο DZ online πληρωμής χωρίς συμβόλαιο, το οποίο είναι διαθέσιμο για προσωπική δοκιμή.
|
