Cad a dhéanann @HostBinding agus @HostListener?

Question

Accepted Answer

Ligeann na deoraitheoir seo do threoir nó ghníomhaireachta an eilimint **host** a ionramháil agus freagra a thabhairt dó — an eilimint ar a bhfuil an treoir (nó an príomh-eilimint an ghníomhaireachta). Socrú `@HostBinding` ar thréithe/ionaid ar an bhhost; éisteann `@HostListener` do thimeanna air. ## @HostBinding — ceangal le tréithe/ionaid an bhhost ```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 } ``` Ceanglaíonn `@HostBinding` go gníomhach aicme/stíl/ionad/airí ar an eilimint host i réimse an ghníomhaireachta — athraigh an réimse agus fáilsíonn an t-óstach. ## @HostListener — freagra a thabhairt do thimeanna an bhhost ```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); } } ``` Sínann `@HostListener` chuig teachtaireacht DOM ar an óstach (agus is féidir `$event` agus argóintí eile a fháil). I dteannta a chéile, ligeann siad do threoir a bheith iomlán neamhspleách: éisteann sé do thimeanna ar a óstach agus uaslíonn sé gníomhach éilimh an óstach. ## Samplaí iomlán: soilsiú foluain ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## An rogha meiteashonraí óstach ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Cén fáth ar thábhachtach Is iad `@HostBinding` agus `@HostListener` na huirlisí caighdeánacha do **threoruithe** a bheith i dteagmháil lena eilimint host — ranganna/stíleanna/ionaid a chur leis agus freagra a thabhairt do thimeanna go bhformúlúch, gan `ElementRef.nativeElement` a ghabhála go láimh agus a bheith ag soláthar an éisteoirí. Tá siad bunúsach chun treoruithe iompair iniúsáidte (soilsiú, leabhar foluain, tarraingthe, giuirléid inrochtana) a thógáil go glanbhéasach, agus bainistríonn siad go huachairí an bhreathnú athraithe agus an ghlanadh éisteoirí a bhéarfadh cód DOM láimhe a bhainistiú.