X'jinħidmu @HostBinding u @HostListener?

Question

Accepted Answer

Dawn id-dekoratori jippermettu li direktiva jew komponent jimmanipulaw u jirrispondu għal **element host** tagħhom — l-element li fuqu qiegħed id-direktiva (jew l-element root tal-komponent stess). `@HostBinding` jistabbilixxi proprjetajiet/attributi fuq l-host; `@HostListener` jisma' għall-avvenimenti fuqu. ## @HostBinding — irbit għall-proprjetajiet/attributi tal-host ```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` bir-reattività jirbit klassi/stil/attribut/proprjetà fuq l-element host għal qasam tal-komponent — ibdel il-qasam u l-host jinħaddan. ## @HostListener — jirrispondu għall-avvenimenti tal-host ```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` jissobskrivi għal avveniment DOM fuq l-host (u jista' jirċievi `$event` u argumenti oħra). Flimkien jippermettu lid-direktiva tkun kompletament независима: tasma' għall-avvenimenti fuq l-host tagħha u bir-reattività taġġorna l-appareċċa tal-host. ## Eżempju kompletu: evidenzjar hover ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## L-alternattiva tal-metadati tal-host ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Għaliex hija importanti `@HostBinding` u `@HostListener` huma l-għodod standard għal **direktiви** biex jinteraġixxu mal-element host tagħhom — jżidu klassijiet/stilijiet/attributi u jirrispondu għall-avvenimenti b'mod deklarattiv, mingħajr ma jkollhom jieħdu manwalment `ElementRef.nativeElement` u jgħallqu l-istalkers. Huma essenzjali għall-binjaja ta' direktiви ta' imġiba li jistgħu jintużaw mill-ġdid (evidenzjar, tooltip, draggable, widgets aċċessibbli) bi nitidità, u awtomatikament jħejju l-ċaqliq ta' detekkazzjoniet u tnaddif ta' stalker li kodiċi DOM manuali jieħu jdaħħal.