@HostBinding và @HostListener làm gì?

Question

Accepted Answer

Các decorator này cho phép một directive hoặc component thao tác và phản ứng với **phần tử host** của nó — phần tử mà directive nằm trên (hoặc phần tử gốc của chính component). `@HostBinding` đặt các property/thuộc tính trên host; `@HostListener` lắng nghe các sự kiện trên nó. ## @HostBinding — bind tới các property/thuộc tính của host ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // bật/tắt một CSS class trên host @HostBinding("style.color") color = "black"; // bind một inline style @HostBinding("attr.role") role = "button"; // đặt một thuộc tính } ``` `@HostBinding` bind theo lối reactive một class/style/thuộc tính/property trên phần tử host tới một field của component — thay đổi field và host được cập nhật. ## @HostListener — phản ứng với các sự kiện của 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"; // thay đổi field cập nhật host qua HostBinding } @HostListener("mouseleave") onLeave() { this.bg = ""; } @HostListener("click", ["$event"]) onClick(event: MouseEvent) { console.log("host clicked", event); } } ``` `@HostListener` subscribe một sự kiện DOM trên host (và có thể nhận `$event` cùng các đối số khác). Cùng nhau chúng cho phép một directive hoàn toàn độc lập: nó lắng nghe các sự kiện trên host của nó và cập nhật giao diện của host theo lối reactive. ## Một ví dụ hoàn chỉnh: highlight khi hover ```text

Hover me

→ mouseenter kích hoạt onEnter() → đặt bg='yellow' → @HostBinding cập nhật background của

→ mouseleave kích hoạt onLeave() → xóa nó ``` ## Lựa chọn dùng metadata host ```ts @Directive({ selector: "[appHighlight]", host: { // tương đương, khai báo trong metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Tại sao điều này quan trọng `@HostBinding` và `@HostListener` là các công cụ tiêu chuẩn để **directive** tương tác với phần tử host của nó — thêm class/style/thuộc tính và phản ứng với các sự kiện theo lối khai báo, mà không cần lấy `ElementRef.nativeElement` thủ công và tự gắn listener. Chúng thiết yếu để xây dựng các directive hành vi tái sử dụng (highlight, tooltip, draggable, các widget hỗ trợ tiếp cận) một cách gọn gàng, và chúng tự động xử lý change detection cùng việc dọn dẹp listener mà code DOM thủ công sẽ phải quản lý.