Angular - dekorator HostListener czyli podpinanie się pod zdarzenia komponentu

Stronę tą wyświetlono już: 59 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
  1. countClick: number = 0;
  3. @HostListener('click')
  4. onClick() {
  5. this.countClick ++;
  6. }

Powyższy fragment kodu wystarczy umieścić w swoim komponencie, a dla efektu w HTML-u zamieścić:

Listing 2
  1. <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
  1. countClick: number = 0;
  3. @HostListener('click', ['$event.target'])
  4. onClick(target) {
  5. this.countClick ++;
  6. console.log('target: ' + target + ' countClick = ' + this.countClick);
  7. }

Komentarze