Šie dekoratoriai leidžia direktyvai ar komponentui manipuliuoti ir reaguoti į savo host elementą — elementą, kuriame yra direktyva (arba komponento savą šakninį elementą). @HostBinding nustato savybes/atributus host; @HostListener klausosi jo įvykių.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reaktyviai susieja klasę/stilių/atributą/savybę host elemente su komponento lauku — pakeiskite lauką ir host bus atnaujintas.
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 prenumeruoja DOM įvykį host (ir gali gauti $event ir kitus argumentus). Kartu jie leidžia direktyvai būti visiškai savarankiškai: ji klausosi savo host įvykių ir reaktyviai atnaujina host išvaizdą.
<p appHighlight>Hover me</p>
→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the <p>'s background
→ mouseleave fires onLeave() → clears it
@Directive({
selector: "[appHighlight]",
host: { // equivalent, declared in metadata
"[class.active]": "isActive",
"(click)": "onClick($event)",
},
})
@HostBinding ir @HostListener yra standartiniai direktyvoms skirti įrankiai, kad sąveikautų su jų host elementu — pridedant klases/stilius/atributus ir deklaratyviai reaguojant į įvykius, nereikia rankiniu būdu pasiimti ElementRef.nativeElement ir prijungti klausytojus.
Jie yra būtini norint sukurti iš naujo naudojamas elgesio direktyvas (pabraukimas, patarimas, pasikviečiama, prieinamieji valdikliai) šviesiai, ir jie automatiškai valdo keitimų aptikimą ir klausytojo valymą, kuriuos tektų tvarkyti rankiniu DOM kodu.