Mit csinálnak a @HostBinding és @HostListener dekorátorok?

Question

Accepted Answer

Ezek a dekorátorok lehetővé teszik egy direktívának vagy komponensnek, hogy manipuláljon és reagáljon host eleméhez — az elemhez, amelyen a direktíva ül (vagy a komponens saját gyökér elemére). A @HostBinding tulajdonságokat/attribútumokat állít be a hoszt-on; a @HostListener eseményeket figyel rajta.

@HostBinding — kötődés a hoszt tulajdonságaihoz/attribútumaihoz

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
}

A @HostBinding reaktívan köti össze a hoszt elemen lévő osztályt/stílust/attribútumot/tulajdonságot a komponens mezőjével — módosítsa a mezőt, és a hoszt frissül.

@HostListener — reagálás a hoszt eseményeire

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);
  }
}

A @HostListener feliratkozik a hoszt-on lévő DOM eseményre (és fogadhat $event és egyéb argumentumokat). Együtt lehetővé teszik a direktívának, hogy teljesen önálló legyen: figyeli a hoszt-on lévő eseményeket és reaktívan frissíti a hoszt megjelenéseit.

Teljes példa: hover highlight

text

<p appHighlight>Hover me</p>
→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the <p>'s background
→ mouseleave fires onLeave() → clears it

A hoszt metaadat alternatívája

ts

@Directive({
  selector: "[appHighlight]",
  host: {                                  // equivalent, declared in metadata
    "[class.active]": "isActive",
    "(click)": "onClick($event)",
  },
})

Miért fontos

A @HostBinding és @HostListener a direktívák standard eszközei a hoszt elemükkel való interakcióhoz — osztályok/stílusok/attribútumok hozzáadása és deklaratív reagálás az eseményekre, anélkül, hogy manuálisan meg kellene ragadnunk az ElementRef.nativeElement-et és drótoznunk az figyelőket.

Esszenciálisak az újrafelhasználható viselkedési direktívák (highlight, tooltip, draggable, hozzáférhető widgetek) tiszta felépítéséhez, és automatikusan kezelik a változásdetektálást és a figyelőmegtisztítást, amelyeket a kézi DOM-kód kezelnie kellene.

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## A hoszt metaadat alternatívája ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Miért fontos A `@HostBinding` és `@HostListener` a **direktívák** standard eszközei a hoszt elemükkel való interakcióhoz — osztályok/stílusok/attribútumok hozzáadása és deklaratív reagálás az eseményekre, anélkül, hogy manuálisan meg kellene ragadnunk az `ElementRef.nativeElement`-et és drótoznunk az figyelőket. Esszenciálisak az újrafelhasználható viselkedési direktívák (highlight, tooltip, draggable, hozzáférhető widgetek) tiszta felépítéséhez, és automatikusan kezelik a változásdetektálást és a figyelőmegtisztítást, amelyeket a kézi DOM-kód kezelnie kellene.