Στο AngularJS 1, εάν θέλετε να αλλάξετε την κατάσταση εμφάνισης των στοιχείων DOM, πιθανότατα θα χρησιμοποιήσετε τις ενσωματωμένες εντολές στο AngularJS 1, όπως ng-show ή ng-hide:
Παράδειγμα AngularJS 1:
Στο angular2, η νέα σύνταξη προτύπου σάς επιτρέπει να δεσμεύετε εκφράσεις σε οποιεσδήποτε εγγενείς ιδιότητες των στοιχείων DOM. Αυτό το απολύτως φοβερό χαρακτηριστικό ανοίγει ατελείωτες δυνατότητες. Ένα από αυτά είναι να συνδέσετε την έκφραση με την εγγενή κρυφή ιδιότητα, η οποία μοιάζει λίγο με το ng-show, και επίσης ορίζει την εμφάνιση: καμία για το στοιχείο:
[Κρυφό] Παράδειγμα Angular2 (δεν συνιστάται):
Με την πρώτη ματιά, το παραπάνω παράδειγμα φαίνεται να είναι ng-show στο AngularJS 1. Στην πραγματικότητα, έχουν! σημαντικές διαφορές.
Τόσο το ng-show όσο και το ng-hide ελέγχουν την κατάσταση εμφάνισης των στοιχείων DOM μέσω μιας κλάσης CSS που ονομάζεται ng-hide, η οποία απλώς ορίζει το στοιχείο να εμφανίζεται: κανένα. Το κλειδί εδώ είναι ότι το AngularJS 1 προστέθηκε στην κλάση ng-hide! Σημαντικό, το οποίο προσαρμόζει την προτεραιότητα της κλάσης έτσι ώστε να μπορεί να αντικαταστήσει την εκχώρηση της ιδιότητας εμφάνισης του στοιχείου από άλλα στυλ.
Πίσω σε αυτό το παράδειγμα, το στυλ display: none στο εγγενές κρυφό χαρακτηριστικό υλοποιείται από το πρόγραμμα περιήγησης. Τα περισσότερα προγράμματα περιήγησης δεν το χρησιμοποιούν! σημαντικό να προσαρμόσει την προτεραιότητά του. Επομένως, ο έλεγχος της κατάστασης εμφάνισης ενός στοιχείου χρησιμοποιώντας [hidden]="expression" μπορεί εύκολα να αντικατασταθεί κατά λάθος από άλλα στυλ. Για παράδειγμα: αν γράψω ένα τέτοιο στυλ για αυτό το στοιχείο αλλού, display: flex, αυτό έχει προτεραιότητα έναντι της εγγενούς κρυφής ιδιότητας (δείτε εδώ).
Για το λόγο αυτό, συνήθως χρησιμοποιούμε το *ngIf για να αλλάξουμε την κατάσταση παρουσίας του στοιχείου για να επιτύχουμε τον ίδιο στόχο:
*ngΕάν παράδειγμα γωνιακού2 (συνιστάται):
Σε αντίθεση με την εγγενή κρυφή ιδιότητα, το *ngIf στο angular2 δεν περιορίζεται στο στυλ. Ανεξάρτητα από το είδος του CSS που γράφετε, είναι ασφαλής. Ωστόσο, εξακολουθεί να είναι απαραίτητο να αναφέρουμε ότι το *ngIf δεν ελέγχει την κατάσταση εμφάνισης του στοιχείου, αλλά επιτυγχάνει άμεσα το αποτέλεσμα της εμφάνισης ή όχι προσθέτοντας/αφαιρώντας το στοιχείο από το πρότυπο.
Φυσικά, μπορείτε επίσης να προσθέσετε μια κρυφή προτεραιότητα στο κρυφό χαρακτηριστικό ενός στοιχείου, χρησιμοποιώντας ένα καθολικό στυλ, όπως display: none !important, για να επιτύχετε αυτό το αποτέλεσμα. Μπορείτε να ρωτήσετε, αφού η γωνιακή ομάδα γνωρίζει αυτά τα προβλήματα, γιατί να μην προσθέσετε απλώς ένα παγκόσμιο κρυφό στυλ υψηλότερης προτεραιότητας στο κρυφό στο πλαίσιο; Η απάντηση είναι ότι δεν μπορούμε να εγγυηθούμε ότι η προσθήκη καθολικών στυλ είναι η καλύτερη επιλογή για όλες τις εφαρμογές. Επειδή αυτή η προσέγγιση στην πραγματικότητα σπάει τη λειτουργικότητα που βασίζεται σε εγγενείς κρυφές δυνατότητες, αφήνουμε την επιλογή στους μηχανικούς.
|
Δημοσιεύτηκε στις 22/5/2019 2:02:02 μ.μ.
|
|
|
