@HostBinding ve @HostListener ne işe yarar?

Question

Accepted Answer

Bu dekoratörler, bir directive veya bileşenin kendi **host element**ini — directive'in oturduğu element (veya bileşenin kendi kök element) — manipüle etmesine ve yanıt vermesine olanak tanır. `@HostBinding` host üzerinde özellikleri/nitelikleri ayarlar; `@HostListener` host'ta olaylara kulak kabarır. ## @HostBinding — host özellikleri/niteliklerine bağla ```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` host element üzerindeki bir sınıfı/stili/niteliği/özelliği reaktif olarak bir bileşen alanına bağlar — alanı değiştirin ve host güncellensin. ## @HostListener — host olaylarına yanıt ver ```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` host üzerindeki bir DOM olayına abone olur (ve `$event` ile diğer argümanları alabilir). Birlikte bir directive'i tamamen kapsüllü olmasını sağlarlar: host'taki olaylara kulak kabarır ve host'un görünümünü reaktif olarak günceller. ## Tam bir örnek: hover vurgulama ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## Host metadata alternatifi ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Neden önemli `@HostBinding` ve `@HostListener`, **directive'ler** için host element'i ile etkileşim kurmak için standart araçlardır — sınıflar/stiller/nitelikler eklemek ve olaylara bildirimsel olarak yanıt vermek, `ElementRef.nativeElement`'i manuel olarak yakalamak ve dinleyicileri bağlamak zorunda kalmadan. Yeniden kullanılabilir davranış directive'leri (vurgulama, tooltip, sürüklenebilir, erişilebilir widget'lar) temiz bir şekilde oluşturmak için gereklidirler ve otomatik olarak değişim algılaması ve dinleyici temizliğini yönetirler; bu, manuel DOM kodu yönetmek zorunda kalır.