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:
- 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);
- }

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman

Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta

Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri

Tytuł:
Angular w akcji
Autor:
Jeremy Wilken

Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman

Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz