Angular - dekorator HostListener czyli podpinanie się pod zdarzenia komponentu

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

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

Komentarze