Angular 2 - obsługa zdarzeń

W Angular 2 zdarzenia takie jak kliknięcie przycisku lub inne zdarzenia mogą być również bardzo łatwo obsługiwane. Zdarzenia są wywoływane ze strony html i przesyłane do klasy Angular JS w celu dalszego przetwarzania.

Spójrzmy na przykład, jak możemy osiągnąć obsługę zdarzeń. W naszym przykładzie przyjrzymy się wyświetlaniu przycisku kliknięcia i właściwości statusu. Początkowo właściwość status będzie miała wartość true. Po kliknięciu przycisku właściwość statusu zmieni się na false.

Step 1 - Zmień kod pliku app.component.ts na następujący.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

Należy zwrócić uwagę na następujące punkty dotyczące powyższego kodu.

Definiujemy zmienną o nazwie status typu Boolean, która początkowo jest prawdziwa.
Następnie definiujemy klikniętą funkcję, która będzie wywoływana po każdym kliknięciu naszego przycisku na naszej stronie html. W funkcji zmieniamy wartość właściwości Status z true na false.

Step 2 - Wprowadź następujące zmiany w pliku app / app.component.html, który jest plikiem szablonu.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

Należy zwrócić uwagę na następujące punkty dotyczące powyższego kodu.

Najpierw wyświetlamy tylko wartość właściwości Status naszej klasy.
Następnie definiujemy tag html przycisku z wartością Click. Następnie zapewniamy, że zdarzenie kliknięcia przycisku zostanie wywołane przez zdarzenie kliknięcia w naszej klasie.

Step 3 - Zapisz wszystkie zmiany w kodzie i odśwież przeglądarkę, otrzymasz następujące dane wyjściowe.

Step 4 - Kliknij przycisk Kliknij, aby uzyskać następujące wyniki.