Τι κάνουν @HostBinding και @HostListener;

Question

Accepted Answer

Αυτές οι διακοσμήσεις επιτρέπουν σε μια οδηγία ή ένα εξάρτημα να χειρίζεται και να αντιδρά στο **στοιχείο κεντρικού υπολογιστή** — το στοιχείο στο οποίο βρίσκεται η οδηγία (ή το δικό του ριζικό στοιχείο του εξαρτήματος). `@HostBinding` ορίζει ιδιότητες/χαρακτηριστικά στον κεντρικό υπολογιστή. `@HostListener` ακούει για γεγονότα σε αυτό. ## @HostBinding — δέσμευση με ιδιότητες/χαρακτηριστικά κεντρικού υπολογιστή ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // toggle a CSS class on the host @HostBinding("style.color") color = "black"; // bind an inline style @HostBinding("attr.role") role = "button"; // set an attribute } ``` `@HostBinding` δεσμεύει αντιδραστικά μια κλάση/στυλ/χαρακτηριστικό/ιδιότητα στο στοιχείο κεντρικού υπολογιστή σε ένα πεδίο εξαρτήματος — αλλάξτε το πεδίο και ο κεντρικός υπολογιστής ενημερώνεται. ## @HostListener — αντιδράστε σε γεγονότα κεντρικού υπολογιστή ```ts import { Directive, HostListener, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("style.background") bg = ""; @HostListener("mouseenter") onEnter() { this.bg = "yellow"; // changing the field updates the host via HostBinding } @HostListener("mouseleave") onLeave() { this.bg = ""; } @HostListener("click", ["$event"]) onClick(event: MouseEvent) { console.log("host clicked", event); } } ``` `@HostListener` εγγράφεται σε ένα γεγονός DOM στον κεντρικό υπολογιστή (και μπορεί να λάβει `$event` και άλλα ορίσματα). Μαζί, επιτρέπουν σε μια οδηγία να είναι πλήρως αυτόνομη: ακούει τα γεγονότα στον κεντρικό της υπολογιστή και αντιδραστικά ενημερώνει την εμφάνιση του κεντρικού υπολογιστή. ## Ένα ολοκληρωμένο παράδειγμα: επισήμανση αιώρησης ```text

Hover me

→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the

's background → mouseleave fires onLeave() → clears it ``` ## Η εναλλακτική μεταδεδομένα κεντρικού υπολογιστή ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Γιατί έχει σημασία `@HostBinding` και `@HostListener` είναι τα τυπικά εργαλεία για **οδηγίες** να αλληλεπιδρούν με το στοιχείο του κεντρικού υπολογιστή — προσθέστε δηλωτικά κλάσεις/στυλ/χαρακτηριστικά και αντιδράστε σε γεγονότα, χωρίς να χρειάζεται να αποκτήσετε χειροκίνητα `ElementRef.nativeElement` και να καλωδιώσετε ακροατές. Είναι απαραίτητα για την κατασκευή επαναχρησιμοποιήσιμων οδηγιών συμπεριφοράς (επισήμανση, συμβουλή εργαλείου, σύρσιμο, προσβάσιμα widget) καθαρά και χειρίζονται αυτόματα την ανίχνευση αλλαγών και τον καθαρισμό ακροατή που θα έπρεπε να διαχειριστεί ο χειροκίνητος κώδικας DOM.