@HostBinding และ @HostListener ทำหน้าที่อะไร

Question

Accepted Answer

decorators เหล่านี้ให้ directive หรือ component สามารถจัดการและตอบสนองต่อ **host element** ของมัน — element ที่ directive อยู่บน (หรือ root element ของ component เอง) ได้ `@HostBinding` ตั้งค่า properties/attributes บน host; `@HostListener` ฟังเหตุการณ์บน host ## @HostBinding — bind กับ host properties/attributes ```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` ผูก class/style/attribute/property บน host element กับ component field อย่างมี reactive — เปลี่ยน field และ host จะอัปเดต ## @HostListener — ตอบสนองต่อ host events ```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` subscribe กับ DOM event บน host (และสามารถรับ `$event` และ args อื่น ๆ) คู่กันทำให้ directive สามารถ self-contained ได้อย่างสมบูรณ์: มันฟังเหตุการณ์บน host และอัปเดต appearance ของ host อย่างมี reactive ## ตัวอย่างที่สมบูรณ์: hover highlight ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## ทางเลือก host metadata ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## เหตุใดจึงมีความสำคัญ `@HostBinding` และ `@HostListener` เป็นเครื่องมือมาตรฐานสำหรับ **directives** ในการ interact กับ host element ของมัน — เพิ่ม classes/styles/attributes และตอบสนองต่อเหตุการณ์อย่างประกาศ โดยไม่ต้องจับ `ElementRef.nativeElement` ด้วยตนเองและ wire listeners เป็นสิ่งจำเป็นสำหรับการสร้าง reusable behavior directives (highlight, tooltip, draggable, accessible widgets) ที่สะอาด และพวกมันจัดการ change detection และ listener cleanup โดยอัตโนมัติซึ่ง manual DOM code จะต้องจัดการ