Angular7 - Ereignisbindung

In diesem Kapitel wird erläutert, wie die Ereignisbindung in Angular 7 funktioniert. Wenn ein Benutzer mit einer Anwendung in Form einer Tastaturbewegung, eines Mausklicks oder eines Mauszeigers interagiert, wird ein Ereignis generiert. Diese Ereignisse müssen behandelt werden, um eine Aktion auszuführen. Hier kommt die Ereignisbindung ins Spiel.

Betrachten wir ein Beispiel, um dies besser zu verstehen.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click) = "myClickFunction($event)">
   Click Me
</button>

In dem app.component.html Datei haben wir eine Schaltfläche definiert und mithilfe des Klickereignisses eine Funktion hinzugefügt.

Im Folgenden finden Sie die Syntax zum Definieren einer Schaltfläche und zum Hinzufügen einer Funktion.

(click) = "myClickFunction($event)"

Die Funktion ist definiert in:app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';
   
   // declared array of months.
   months = ["January", "February", "March", "April", "May","June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = true; //variable is set to true
   myClickFunction(event) {
      //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

Durch Klicken auf die Schaltfläche gelangt das Steuerelement zur Funktion myClickFunction und ein Dialogfeld wird angezeigt, in dem das angezeigt wird Button is clicked wie im folgenden Screenshot gezeigt -

Das Styling für die Schaltfläche wird in add.component.css hinzugefügt -

button {
   background-color: #2B3BCF;
   border: none;
   color: white;
   padding: 10px 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
}

Fügen wir nun das Ereignis onchange zur Dropdown-Liste hinzu.

Die folgende Codezeile hilft Ihnen, das Änderungsereignis zur Dropdown-Liste hinzuzufügen:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)">
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<br/>

<button (click) = "myClickFunction($event)">
   Click Me
</button>

Die Funktion ist in der deklariert app.component.ts Datei -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';
   
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = true; //variable is set to true
   myClickFunction(event) {
      //just added console.log which will display the event 
      details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

Wählen Sie den Monat aus der Dropdown-Liste aus und Sie sehen die Konsolenmeldung „Changed month from the Dropdown”Wird zusammen mit dem Ereignis in der Konsole angezeigt.

Fügen wir eine Warnmeldung hinzu app.component.ts wenn der Wert aus der Dropdown-Liste wie unten gezeigt geändert wird -

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true 
   myClickFunction(event) { 
      //just added console.log which will display the event 
      details in browser on click of the button. 
      alert("Button is clicked"); console.log(event); 
   } 
   changemonths(event) { 
      alert("Changed month from the Dropdown");
   } 
}

Wenn der Wert in der Dropdown-Liste geändert wird, wird ein Dialogfeld angezeigt und die folgende Meldung wird angezeigt:

“Changed month from the Dropdown”.