Dekorator ini memungkinkan direktif atau komponen memanipulasi dan merespons elemen host mereka — elemen tempat direktif berada (atau elemen root komponen sendiri). @HostBinding menetapkan properti/atribut pada host; @HostListener mendengarkan acara padanya.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding secara reaktif mengikat kelas/gaya/atribut/properti pada elemen host ke bidang komponen — ubah bidang dan host akan diperbarui.
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 berlangganan acara DOM pada host (dan dapat menerima $event dan argumen lainnya). Bersama-sama mereka memungkinkan direktif menjadi sepenuhnya mandiri: ia mendengarkan acara pada hostnya dan secara reaktif memperbarui tampilan 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 dan @HostListener adalah alat standar untuk direktif berinteraksi dengan elemen host mereka — menambahkan kelas/gaya/atribut dan merespons acara secara deklaratif, tanpa harus secara manual mengambil ElementRef.nativeElement dan menghubungkan pendengar.
Mereka sangat penting untuk membangun direktif perilaku yang dapat digunakan kembali (sorot, tooltip, dapat diseret, widget yang dapat diakses) dengan rapi, dan mereka secara otomatis menangani deteksi perubahan dan pembersihan pendengar yang harus dikelola kode DOM manual.