Stronę tą wyświetlono już: 2166 razy
Dekorator HostListener umożliwia podpięcie pod zdarzenie związane z komponentem własnej funkcji, która przy każdorazowym wywołaniu tegoż zdarzenia zostanie uruchomiona. Oto prosty przykład wykorzystania tego dekoratora do podpięcia się pod zdarzenie click:
countClick: number = 0;
@HostListener('click')
onClick() {
this.countClick ++;
}
Powyższy fragment kodu wystarczy umieścić w swoim komponencie, a dla efektu w HTML-u zamieścić:
<p>Liczba kliknięć na komponencie: {{ countClick }}</p>
Po zapisaniu każde kliknięcie w komponencie spowoduje uruchomienie metody onClick i zwiększenie licznika countClick o jeden.
Możliwe jest również przekazanie dowolnej liczby argumentów. Oto przykład:
countClick: number = 0;
@HostListener('click', ['$event.target'])
onClick(target) {
this.countClick ++;
console.log('target: ' + target + ' countClick = ' + this.countClick);
}