Πριν μπούμε στους διακοσμητές ιδιοτήτων HostListener και HostBinding, ας ρίξουμε μια ματιά στο στοιχείο κεντρικού υπολογιστή.
Η έννοια του στοιχείου υποδοχής ισχύει τόσο για εντολές όσο και για στοιχεία. Για οδηγίες, η ιδέα είναι αρκετά απλή. Το στοιχείο που εφαρμόζει την εντολή είναι το στοιχείο κεντρικού υπολογιστή. Ας υποθέσουμε ότι έχουμε δηλώσει μια οδηγία HighlightDirective (επιλογέας: '[exeHighlight]'):
Στον παραπάνω κώδικα HTML, το στοιχείο p είναι το στοιχείο κεντρικού υπολογιστή. Εάν η οδηγία εφαρμόζεται σε ένα προσαρμοσμένο στοιχείο, όπως:
Σε αυτήν την περίπτωση, το προσαρμοσμένο στοιχείο exe-counter είναι το στοιχείο κεντρικού υπολογιστή.
Το HostListener είναι ένας διακοσμητής ιδιοτήτων που προσθέτει στοιχεία ακρόασης συμβάντων σε στοιχεία κεντρικού υπολογιστή.
Στο Angular, μπορούμε να χρησιμοποιήσουμε τον διακοσμητή HostBinding για να εφαρμόσουμε τη δέσμευση ιδιοτήτων των στοιχείων.
Αυτή η οδηγία δείχνει πώς να χρησιμοποιήσετε τον διακοσμητή HostListener για να ακούσετε συμβάντα κλικ χρήστη
Επιπλέον, μπορούμε επίσης να ακούσουμε συμβάντα που δημιουργούνται από αντικείμενα διαφορετικά από το στοιχείο κεντρικού υπολογιστή, όπως παράθυρο ή έγγραφο ή σώμα
Ο στόχος μπορεί να είναι παράθυρο, έγγραφο ή σώμα
Οι @HostBinding() και @HostListener() είναι χρήσιμες κατά την προσαρμογή των οδηγιών. Η @HostBinding() μπορεί να προσθέσει, στυλ, χαρακτηριστικά κ.λπ. στο στοιχείο κεντρικού υπολογιστή της εντολής, ενώ η @HostListener() μπορεί να ακούσει συμβάντα στο στοιχείο κεντρικού υπολογιστή.
Παράδειγμα: Εφαρμόστε ένα χρώμα γραμματοσειράς και περιγράμματος που αλλάζει το χρώμα γραμματοσειράς και περιγράμματος σε πραγματικό χρόνο καθώς πληκτρολογείτε
Ας μιλήσουμε για το κύριο μέρος του παραπάνω κώδικα:
(1): Ονομάστε την εφαρμογή εντολών μαςΟυράνιο τόξο
(2): Ορίστε όλα τα πιθανά χρώματα που πρέπει να δείξουμε
(3): Καθορίστε και διακοσμήστε το χρώμα και το περίγραμμαΧρώμα με @HostBinding() για στυλ
(4): Χρησιμοποιήστε το @HostListener() για να ακούσετε το συμβάν keydown του στοιχείου κεντρικού υπολογιστή και να αντιστοιχίσετε τυχαία χρώματα στο χρώμα και το χρώμα περιγράμματος
Χρησιμοποιήστε αυτήν την εντολή στη σελίδα:
Το αποτέλεσμα έχει ως εξής:
|
Δημοσιεύτηκε στις 26/6/2019 2:42:08 μ.μ.
|
|
|
|
