Angular 2 - Gestione degli eventi

In Angular 2, anche eventi come il clic di un pulsante o qualsiasi altro tipo di evento possono essere gestiti molto facilmente. Gli eventi vengono attivati ​​dalla pagina html e vengono inviati alla classe JS Angular per un'ulteriore elaborazione.

Diamo un'occhiata a un esempio di come possiamo ottenere la gestione degli eventi. Nel nostro esempio, esamineremo la visualizzazione di un pulsante di clic e una proprietà di stato. Inizialmente, la proprietà status sarà true. Quando si fa clic sul pulsante, la proprietà status diventerà falsa.

Step 1 - Cambia il codice del file app.component.ts come segue.

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

I seguenti punti devono essere annotati sul codice sopra.

• Stiamo definendo una variabile chiamata status di tipo Boolean che inizialmente è vera.

• Successivamente, stiamo definendo la funzione cliccata che verrà chiamata ogni volta che il nostro pulsante viene cliccato sulla nostra pagina html. Nella funzione, cambiamo il valore della proprietà Status da true a false.

Step 2 - Apporta le seguenti modifiche al file app / app.component.html, che è il file modello.

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

I seguenti punti devono essere annotati sul codice sopra.

• Per prima cosa stiamo solo visualizzando il valore della proprietà Status della nostra classe.

• Quindi stanno definendo il tag html del pulsante con il valore di Click. Ci assicuriamo quindi che l'evento clic del pulsante venga attivato per l'evento selezionato nella nostra classe.

Step 3 - Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output.

Step 4 - Fare clic sul pulsante Fare clic, si otterrà il seguente output.