Dekorator hizi huruhusu direktiva au kijenzi kuharaka na kujibu host element yake — elementi ambayo direktiva iko (au elementi ya mizizi ya kijenzi). @HostBinding huweka mali/sifa katika host; @HostListener huskia matukio yake.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding huunganisha kwa uzamili darasa/mtindo/sifa/mali kwenye elementi ya host kwa shambani la kijenzi — badilisha shambani na host hisabatika.
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 hunakili matukio ya DOM kwenye host (na inaweza kupokea $event na hoja nyingine). Pamoja huruhusu direktiva kuwa kujitegemea: inaskia matukio katika host yake na kusasisha kwa uzamili muoneko wa host.
<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 na @HostListener ni zana za kawaida kwa direktiva kuingiliana na elementi yao ya host — kuongeza madarasa/mitindo/sifa na kujibu matukio kwa uwazi, bila kumkamata ElementRef.nativeElement kwa mikono na kuunganisha wasikilizaji.
Zina mahitaji ya kujenga muundo wa uweza wa matukio yanayojiengezeana kwa uzuri (kuangazwa, kidokezo, kuvuta, wijeti zinazopatikana), na zinashughulikia kiotomatiki kugunduzi mabadiliko na utoaji wa wasikilizaji ambayo msimbo wa DOM wa mwenyewe ungekuwa na kukamatia.