Winkel 2 - Behandlung von Ereignissen

In Angular 2 können Ereignisse wie das Klicken auf eine Schaltfläche oder andere Ereignisse ebenfalls sehr einfach verarbeitet werden. Die Ereignisse werden von der HTML-Seite ausgelöst und zur weiteren Verarbeitung an die Angular JS-Klasse gesendet.

Schauen wir uns ein Beispiel an, wie wir die Ereignisbehandlung erreichen können. In unserem Beispiel sehen wir uns die Anzeige einer Klickschaltfläche und einer Statuseigenschaft an. Anfangs ist die Statuseigenschaft wahr. Wenn Sie auf die Schaltfläche klicken, wird die Statuseigenschaft falsch.

Step 1 - Ändern Sie den Code der Datei app.component.ts wie folgt.

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

Die folgenden Punkte müssen zum obigen Code beachtet werden.

Wir definieren eine Variable namens status vom Typ Boolean, die anfangs wahr ist.
Als nächstes definieren wir die angeklickte Funktion, die aufgerufen wird, wenn unsere Schaltfläche auf unserer HTML-Seite angeklickt wird. In der Funktion ändern wir den Wert der Status-Eigenschaft von true in false.

Step 2 - Nehmen Sie die folgenden Änderungen an der Datei app / app.component.html vor, bei der es sich um die Vorlagendatei handelt.

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

Die folgenden Punkte müssen zum obigen Code beachtet werden.

Wir zeigen zunächst nur den Wert der Status-Eigenschaft unserer Klasse an.
Definieren Sie dann das HTML-Tag der Schaltfläche mit dem Wert von Click. Wir stellen dann sicher, dass das Klickereignis der Schaltfläche für das angeklickte Ereignis in unserer Klasse ausgelöst wird.

Step 3 - Speichern Sie alle Codeänderungen und aktualisieren Sie den Browser. Sie erhalten die folgende Ausgabe.

Step 4 - Klicken Sie auf die Schaltfläche Klicken, um die folgende Ausgabe zu erhalten.