Angular - dekorator HostListener czyli podpinanie się pod zdarzenia komponentu

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2037 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); }
Propozycje książek