Angular - dekorator HostListener czyli podpinanie się pod zdarzenia komponentu

Stronę tą wyświetlono już: 1228 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:

Listing 1

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ć:

Listing 2

<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:

Listing 3

countClick: number = 0;
@HostListener('click', ['$event.target'])
onClick(target) {
this.countClick ++;
console.log('target: ' + target + ' countClick = ' + this.countClick);
}