რა აკეთებს @HostBinding და @HostListener?

Question

Accepted Answer

ეს დეკორატორები საშუალებას აძლევს დირექტივას ან კომპონენტს იმანიპულიროს და უპასუხოს მის **host ელემენტზე** — ელემენტზე, რომელზეც დირექტივა მდებარეობს (ან კომპონენტის საკუთარი root ელემენტზე). `@HostBinding` ადგენს თვისებებს/ატრიბუტებს host-ზე; `@HostListener` უსმენს მისი ღсобытებს. ## @HostBinding — აკავშირე 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` რეაქტიულად აკავშირებს კლასს/სტილს/ატრიბუტს/თვისებას host ელემენტზე კომპონენტის ველთან — შეცვალე ველი და host განახლდება. ## @HostListener — უპასუხე 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` გამოწერს DOM ღობივენებას host-ზე (და შეიძლება მიიღოს `$event` და სხვა არგუმენტები). ერთად ისინი საშუალებას აძლევს დირექტივას იყოს სრულად დამოუკიდებელი: უსმენს მის host-ის ღობივენებებს და რეაქტიულად განახლებს host-ის გარეგნობას. ## სრული მაგალითი: ჰოვერ გამოკვეთა ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## Host მეტადატის ალტერნატივა ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## რატომ მნიშვნელოვანია `@HostBinding` და `@HostListener` არის სტანდარტული ინსტრუმენტები **დირექტივებისთვის**, რომ ურთიერთქმედება აკეთონ მათ host ელემენტთან — კლასების/სტილების/ატრიბუტების დამატება და ღობივენებებზე დეკლარატიულად პასუხის გაცემა, `ElementRef.nativeElement` ხელით აღების და listener-ების შეერთების გარეშე. ისინი აუცილებელია გამოყენებადი ქცევის დირექტივების აგებისთვის (გამოკვეთა, tooltip, draggable, ხელმისაწვდომი widget-ები) სუფთაგვარად, და ისინი ავტომატურად სამართავენ ცვლილების აღმოჩენას და listener-ის გაწმენდას, რომელიც ხელით DOM კოდი უნდა მართავდეს.