Çfarë bëjnë @HostBinding dhe @HostListener?

Question

Accepted Answer

Këta dekoratorë i lejojnë një direktive ose komponent të manipulojë dhe të përgjigjet ndaj **host element**-it të saj — elementi në të cilin ndodhet direktiva (ose elementi rrënjë i komponentit). `@HostBinding` vendos vetitë/atributet në host; `@HostListener` dëgjon ngjarjet në të. ## @HostBinding — lidhe vetitë/atributet e host-it ```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` me reaktivitet lidh një klasë/stil/atribut/veti në elementin host me një fushë komponenti — ndryshoni fushën dhe host-i përditësohet. ## @HostListener — përgjigju ngjarjeve të host-it ```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` abonon një ngjarje DOM në host-in (dhe mund të marrë `$event` dhe argumente të tjera). Së bashku ato lejojnë një direktive të jetë plotësisht e vetëmbulluar: ajo dëgjon ngjarjet në host-in e saj dhe përditëson në mënyrë reaktive pamjen e host-it. ## Një shembull i plotë: theksimi i hover-it ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## Alternativa e metapodateve të host-it ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Pse është e rëndësishme `@HostBinding` dhe `@HostListener` janë mjet standardë për **direktivat** të ndërveprojnë me elementin e tyre host — të shtojnë klasa/stile/atribute dhe të përgjigjen ngjarjeve në mënyrë deklarative, pa kapur dorazi `ElementRef.nativeElement` dhe të lidhin dëgjuesit. Ato janë esenciale për ndërtimin e direktivave të sjelljeve të ripërdorshme (theksim, tooltip, dragable, widget-e të arritshme) në mënyrë të pastër, dhe ato trajtojnë automatikisht zbulimin e ndryshimeve dhe pastrimin e dëgjuesit që kodi DOM manual do të duhej të menaxhonte.