Mitä @HostBinding ja @HostListener tekevät?

Question

Accepted Answer

Nämä koristimet antavat direktiiville tai komponentille mahdollisuuden manipuloida ja reagoida sen **isäntäelementtiin** — elementtiin, jolla direktiivi sijaitsee (tai komponentin omaan juurielementtiin). `@HostBinding` asettaa ominaisuuksia/attribuutteja isäntään; `@HostListener` kuuntelee tapahtumia sillä. ## @HostBinding — sitominen isäntäominaisuuksiin/attribuutteihin ```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` sitoo reaktiivisesti luokan/tyylin/attribuutin/ominaisuuden isäntäelementissä komponentin kenttään — muuta kenttää ja isäntä päivittyy. ## @HostListener — reagoi isäntätapahtumiin ```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` tilaa DOM-tapahtuman isäntään (ja voi vastaanottaa `$event`-tapahtuman ja muita argumentteja). Yhdessä ne antavat direktiiville mahdollisuuden olla täysin itsenäinen: se kuuntelee tapahtumia isännällään ja päivittää reaktiivisesti isännän ulkoasun. ## Täydellinen esimerkki: hover-korostus ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## Isäntämetadata-vaihtoehto ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Miksi sillä on merkitystä `@HostBinding` ja `@HostListener` ovat **direktiiveille** vakiotyökalut vuorovaikutukseen isäntäelementinsä kanssa — lisätä luokkia/tyylejä/attribuutteja ja reagoida tapahtumiin julisteissa ilman `ElementRef.nativeElement` -koodin manuaalista ottamista ja kuuntelijoiden johdottamista. Ne ovat välttämättömiä uudelleenkäytettävien käyttäytymisdirektiivin (korostus, vihje, vedettävä, saavutettavat widgetit) rakentamiseen puhtaasti, ja ne hallitsevat automaattisesti muutoksentunnistusta ja kuuntelijoiden siivoustoimintoja, jotka manuaalisen DOM-koodin pitäisi hallita.