Apa yang ditindakake @HostBinding lan @HostListener?

Question

IT Interview Practice · Accepted Answer

Dekorator-dekorator iki ngidini direktif utawa komponen kanggo manipulasi lan nanggepi **elemen host** — elemen sing direktif luwuh (utawa elemen root pribadi komponen). `@HostBinding` nyetel properti/atribut ing host; `@HostListener` ngrungokake acara ing jero. ## @HostBinding — ngikat properti/atribut 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` ngikat reaktif kelas/gaya/atribut/properti ing elemen host menyang sawiji medan komponen — ganti medan lan host dimodifikasi. ## @HostListener — tumugon menyang acara 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` nylang acara DOM ing host (lan bisa nampa `$event` lan argumen liyane). Dhewe-dhewe ngidini direktif dadi rampung mandiri: ngrungokake acara ing hostе lan reaktif nganyari kapenampilan host. ## Conto lengkap: sorot menyang hover ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## Alternatif metadata host ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Butuh apa `@HostBinding` lan `@HostListener` minangka alat standar kanggo **direktif** kanggo sesambungan karo elemen host — nambahe kelas/gaya/atribut lan nanggepi acara kanthi deklaratif, tanpa kudu ngenggo `ElementRef.nativeElement` lan nggolekake listener. Sinten esensial kanggo mbangun direktif kaparilaku bisa digunake maneh (sorot, tip alat, bisa diseret, widget akses) kanthi resik, lan sawalik ngatur deteksi owah-owahan lan pembersihan listener sing kode DOM manual kudu ngatur.

@HostBinding — ngikat properti/atribut host

@HostListener — tumugon menyang acara host

Conto lengkap: sorot menyang hover

Alternatif metadata host

Butuh apa

Pitakon sing gegandhengan