Μπορείτε να προσθέσετε οδηγίες στο HTML στο Angular έργο σας. Ορισμένοι ελέγχουν τη δομή της σήμανσής σας, ενώ άλλοι εστιάζουν σε χαρακτηριστικά.
Αυτό το άρθρο θα εξετάσει τις έξι πιο κοινές οδηγίες Angular: ngFor, ngIf, ngClass, ngStyle, ngModel και ngSwitch.
Τι είναι οι γωνιακές οδηγίες;
Οι γωνιακές οδηγίες σάς επιτρέπουν να χρησιμοποιείτε εντολές if και βρόχους for και να προσθέτετε άλλη συμπεριφορά στον κώδικα HTML ενός Angular έργου.
| Διευθυντικός | Περιγραφή |
|---|---|
| *ngΑν | Μπορείτε να χρησιμοποιήσετε το ngIf όταν θέλετε ορισμένα μπλοκ HTML να εμφανίζονται μόνο εάν πληρούν μια συγκεκριμένη προϋπόθεση. Για παράδειγμα, εάν είχατε μια φόρμα με ένα αναδυόμενο παράθυρο που εμφανίζεται αφού ο χρήστης έχει εισαγάγει τα δεδομένα για ένα συγκεκριμένο πεδίο. |
| *ngΓια | Μπορείτε να χρησιμοποιήσετε το ngFor εάν χρειάζεστε ένα συγκεκριμένο μπλοκ για επανάληψη πολλές φορές. Για παράδειγμα, εάν είχατε μια λίστα στοιχείων και έπρεπε να εμφανίσετε ένα div για κάθε στοιχείο. |
| *ngClass | Αυτό προσθέτει στυλ υπό όρους χρησιμοποιώντας μια τάξη. Εάν μια δήλωση if πληροί την προϋπόθεση, θα εφαρμόσει την καθορισμένη κλάση. |
| *ngStyle | Αυτό προσθέτει στυλ υπό όρους σε σειρά. Εάν μια δήλωση if πληροί τη συνθήκη, θα εφαρμόσει τα καθορισμένα στυλ. |
| *ngModel | Αυτό σας επιτρέπει να κάνετε αμφίδρομη σύνδεση. Αυτό σημαίνει ότι μπορείτε να μεταβιβάσετε δεδομένα και προς τις δύο κατευθύνσεις μεταξύ του αρχείου HTML και TypeScript. Για παράδειγμα, μπορείτε να μεταβιβάσετε την τιμή ενός χαρακτηριστικού από το αρχείο TypeScript στο αρχείο HTML και αντίστροφα. |
| *ngΔιακόπτης | Αυτό σας επιτρέπει να προσθέσετε μια δήλωση διακόπτη με πολλές περιπτώσεις για να ελέγξετε πολλές τιμές. Με βάση τις περιπτώσεις, θα εμφανιστούν ορισμένα στοιχεία HTML. |
Οι δομικές οδηγίες περιλαμβάνουν τη δομή των στοιχείων HTML. Αυτά περιλαμβάνουν τα ngIf, ngFor και ngSwitch. Οι οδηγίες χαρακτηριστικών περιλαμβάνουν την αλλαγή των ιδιοτήτων των στοιχείων HTML. Αυτά περιλαμβάνουν τα ngStyle, ngClass και ngModel.
Πώς να χρησιμοποιήσετε το ngIf
Για να χρησιμοποιήσετε το ngIf, θα χρειαστείτε μια συνθήκη για να αξιολογήσετε ως true για να εμφανιστεί ένα συγκεκριμένο στοιχείο HTML.
- Προσθέστε δύο μεταβλητές στο αρχείο TypeScript. Σε αυτό το παράδειγμα, υπάρχει μια μεταβλητή noPlaylists και μια μεταβλητή για την αποθήκευση των λιστών αναπαραγωγής. Αυτή η μεταβλητή θα αξιολογηθεί ως true εάν το μήκος του πίνακα των λιστών αναπαραγωγής είναι 0.
noPlaylists: boolean = false;
λίστες αναπαραγωγής: οποιαδήποτε = [];κατασκευαστής() { }
ngOnInit(): void {
if (this.playlists.length 0) {
this.noPlaylists = true;
}
} - Στο HTML, προσθέστε την πρόταση *ngIf. Εάν το noPlaylists είναι αληθές, θα εμφανιστεί το μήνυμα σφάλματος που περιέχεται στο παρακάτω διάστημα. Διαφορετικά, δεν θα γίνει. Μπορείτε να εφαρμόσετε το ngIf σε διαφορετικούς τύπους Ετικέτες HTML.
Δεν υπάρχουν διαθέσιμες λίστες αναπαραγωγής.
- Για να προσθέσετε ένα στοιχείο "else" στη δήλωση if, θα χρειαστεί να προσθέσετε τον κώδικα HTML για το τμήμα "else" σε ένα μπλοκ προτύπου.
Δεν υπάρχουν διαθέσιμες λίστες αναπαραγωγής.
Βρέθηκαν λίστες αναπαραγωγής.
Πώς να χρησιμοποιήσετε το ngFor
Εάν χρειάζεται να επαναλάβετε έναν συγκεκριμένο αριθμό μπλοκ σε μια σελίδα, μπορείτε να χρησιμοποιήσετε την οδηγία ngFor.
- Στο αρχείο TypeScript, προσθέστε στοιχεία στον πίνακα.
λίστες αναπαραγωγής: οποιαδήποτε = [
{"name": "Rock", "numberOfSongs": 5},
{"name": "Contemporary", "numberOfSongs": 9},
{"name": "Popular", "numberOfSongs": 14},
{"name": "Acoustic", "numberOfSongs": 3},
{"name": "Wedding Songs", "numberOfSongs": 25},
{"name": "Metal", "numberOfSongs": 0},
]; - Στο αρχείο HTML, προσθέστε την πρόταση *ngFor.
Μέσα στο ngFor, θα μπορείτε να αναφέρετε κάθε αντικείμενο στον πίνακα χρησιμοποιώντας τη μεταβλητή "playlist". Τα "playlist.name" και "playlist.numberOfSongs" θα εκτυπώσουν και τα δύο χαρακτηριστικά εντός του ετικέτα.Βρέθηκαν λίστες αναπαραγωγής.
{{playlist.name}}
{{playlist.numberOfSongs}} τραγούδια
Πώς να χρησιμοποιήσετε το ngClass
Μπορείτε να αλλάξετε την κατηγορία στυλ που χρησιμοποιεί ένα συγκεκριμένο div, με βάση μια συνθήκη.
- Προσθέστε δύο κλάσεις στο αρχείο CSS με διαφορετικά στυλ. Μπορείτε να προσθέσετε οποιοδήποτε είδος Στυλ CSS θέλετε, όπως διαφορετικά χρώματα φόντου.
.τραγούδια {
χρώμα φόντου: #F7F5F2;
}
.noSongs {
χρώμα φόντου: #FFA8A8;
} - Εντός του βρόχου for από το προηγούμενο βήμα, προσθέστε την οδηγία χαρακτηριστικών ngClass. [ngClass]="playlist.numberOfSongs > 0; 'songs': 'noSongs'» χρησιμοποιεί το ίδιο τριαδικός τελεστής του JavaScript και χρήση άλλων γλωσσών.
Εάν ο αριθμός των τραγουδιών είναι μεγαλύτερος από το μηδέν, θα εφαρμόσει την κατηγορία "τραγούδια" στο div. Αυτό θα δώσει στο div ένα γκρι χρώμα φόντου. Διαφορετικά, εάν ο αριθμός των τραγουδιών είναι μηδέν, θα εφαρμόσει την κλάση "noSongs" στο div. Αυτό θα δώσει στο div ένα κόκκινο χρώμα φόντου.
{{playlist.name}}
{{playlist.numberOfSongs}} τραγούδια
Πώς να χρησιμοποιήσετε το ngStyle
Αντί να χρησιμοποιείτε το ngClass, μπορείτε να χρησιμοποιήσετε το ngStyle εάν θέλετε να εφαρμόσετε στυλ in-line αντί για στυλ μέσω μιας τάξης.
- Αλλάξτε το ngClass από το προηγούμενο βήμα για να χρησιμοποιήσετε το ngStyle.
{{playlist.name}}
{{playlist.numberOfSongs}} τραγούδια
[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0; 'μαύρο': 'σκούρο μπλε' }"
Πώς να χρησιμοποιήσετε το ngModel
Μπορείτε να χρησιμοποιήσετε το ngModel για αμφίδρομη σύνδεση. Αυτό σημαίνει ότι μπορείτε να μεταβιβάσετε την τιμή ενός χαρακτηριστικού μεταξύ αρχείων HTML και TypeScript.
Για παράδειγμα, ας πούμε ότι έχετε ένα στοιχείο εισόδου στο αρχείο HTML που χρησιμοποιεί το ngModel. Το χαρακτηριστικό ngModel συνδέεται με μια μεταβλητή στο αρχείο TypeScript. Όταν εισάγετε μια τιμή στην είσοδο, θα ενημερώσει τη μεταβλητή στο αρχείο TypeScript.
Οι αλλαγές που έγιναν στο χαρακτηριστικό στο αρχείο TypeScript θα αντικατοπτρίζονται επίσης στο HTML εάν άλλα divs χρησιμοποιούν αυτήν τη μεταβλητή.
- Στο app.module.ts, προσθέστε το FormsModule στις εισαγωγές στο επάνω μέρος του αρχείου, καθώς και στον πίνακα εισαγωγών.
εισαγωγή { FormsModule } από το '@angular/forms';
@NgModule({
εισαγωγές: [
...
FormsModule
]
}) - Προσθέστε ένα χαρακτηριστικό στο αρχείο TypeScript για να παρακολουθείτε πότε ο χρήστης μετονομάζει μια λίστα αναπαραγωγής.
renamingPlaylists: boolean = false; - Κάντε τις μεταβλητές των λιστών αναπαραγωγής δημόσιες, ώστε να είναι προσβάσιμη όταν χρησιμοποιείτε το ngModel στο αρχείο HTML.
δημόσιες λίστες αναπαραγωγής: οποιαδήποτε = [
...
]; - Προσθέστε δύο κουμπιά στο αρχείο HTML, τα οποία θα σας επιτρέψουν να μετονομάσετε ή να ακυρώσετε τη μετονομασία κάθε λίστας αναπαραγωγής.
- Προσθέστε ένα πλαίσιο εισαγωγής μέσα στο div κάθε playlist. Η είσοδος θα είναι ορατή μόνο όταν κάνετε κλικ στο Μετονομασία λίστας αναπαραγωγής κουμπί. Αυτό το πλαίσιο εισαγωγής θα έχει ένα ngModel δεσμευμένο στο "playlist.name".
Όταν εισάγετε ένα νέο όνομα στο πλαίσιο εισαγωγής, το playlist.name θα ενημερωθεί στο αρχείο TypeScript. Αυτό θα ενημερώσει επίσης τα άλλα div στο αρχείο HTML που χρησιμοποιούν playlist.name.
Πώς να χρησιμοποιήσετε το ngSwitch
Μπορείτε να χρησιμοποιήσετε το ngSwitch για να εμφανίσετε ορισμένα στοιχεία με βάση τις θήκες μέσα σε μια θήκη διακόπτη.
- Προσθέστε μια νέα ιδιότητα "βαθμολόγηση" στα αντικείμενα μέσα στη διάταξη των λιστών αναπαραγωγής. Αυτό το χαρακτηριστικό μπορεί να είναι οποιοσδήποτε αριθμός μεταξύ 0 και 5 (συμπεριλαμβανομένου).
δημόσιες λίστες αναπαραγωγής: οποιαδήποτε = [
{"name": "Rock", "numberOfSongs": 5, "rating": 5},
{"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
{"name": "Popular", "numberOfSongs": 14, "rating": 5},
{"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
{"name": "Wedding Songs", "numberOfSongs": 25, "rating": 5},
{"name": "Metal", "numberOfSongs": 0, "rating": 0},
]; - Προσθέστε μια θήκη διακόπτη κάτω από το όνομα και τον αριθμό των τραγουδιών για μια λίστα αναπαραγωγής. Με βάση τον αριθμό βαθμολογίας για τη λίστα αναπαραγωγής, η λίστα αναπαραγωγής θα εμφανίσει τον σωστό αριθμό αστεριών.
{{playlist.name}}
{{playlist.numberOfSongs}} τραγούδια
★★★★★★★★★★★★★★★Δεν υπάρχουν βαθμολογίες
Μάθετε περισσότερα με το Angular
Τώρα έχετε μάθει τα βασικά των οδηγιών Angular, συμπεριλαμβανομένου του τρόπου χρήσης των ngIf, ngFor, ngClass, ngStyle, ngModel και ngSwitch. Μπορείτε να τα συνδυάσετε για να δημιουργήσετε πιο σύνθετες διεπαφές χρήστη. Υπάρχουν πολλά περισσότερα για να εξερευνήσετε και να μάθετε για το Angular, ανεξάρτητα από το αν είστε αρχάριος ή σε προχωρημένο επίπεδο.
Κορυφαία 8 γωνιακά μαθήματα για αρχάριους και προχωρημένους χρήστες
Διαβάστε Επόμενο
Σχετικά θέματα
- Προγραμματισμός
- Προγραμματισμός
- JavaScript
- HTML
- CSS
Σχετικά με τον Συγγραφέα
Η Sharlene είναι Tech Writer στο MUO και εργάζεται επίσης με πλήρη απασχόληση στην ανάπτυξη λογισμικού. Είναι πτυχιούχος Πληροφορικής και έχει προϋπηρεσία στη Διασφάλιση Ποιότητας και στο Πανεπιστημιακό Φροντιστήριο. Η Sharlene λατρεύει τα παιχνίδια και το πιάνο.
Εγγραφείτε στο ενημερωτικό μας δελτίο
Εγγραφείτε στο ενημερωτικό μας δελτίο για συμβουλές τεχνολογίας, κριτικές, δωρεάν ebook και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για να εγγραφείτε
