Angular 2 Benutzereingabe

Wenn Benutzer auf Links klicken, Buttons drücken oder Text eingeben, lösen diese Benutzerinteraktionen DOM-Ereignisse aus.

In diesem Kapitel lernen wir, wie man die Angular-Ereignisbindungssyntax verwendet, um diese Ereignisse zu binden.

Das folgende GIF demonstriert die Funktionsweise dieses Beispiels:

Der Quellcode kann am Ende des Artikels heruntergeladen werden.

An Benutzereingabeereignisse binden

Wir können den Ereignisbindungsmechanismus von Angular verwenden, um auf jedes DOM-Ereignis zu reagieren.

Das folgende Beispiel bindet ein Klick-Ereignis:

<button (click)="onClickMe()">点我!</button>

Das (click) auf der linken Seite des Gleichheitszeichens zeigt an, dass das Klick-Ereignis des Buttons das Bindungsziel ist. Auf der rechten Seite ist der Text in Anführungszeichen eine Vorlagenanweisung.

Der vollständige Code sieht wie folgt aus:

Datei app/click-me.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'click-me', template: ` <button (click)="onClickMe()">Klick mich!</button> {{clickMessage}}` }) export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage = 'Beispiel!'; } }

Benutzereingaben über das $event-Objekt abrufen

Wir können an alle Arten von Ereignissen binden.

Versuchen wir, an das keyup-Ereignis eines Eingabefelds zu binden und die Eingabe des Benutzers auf dem Bildschirm auszugeben.

Datei app/keyup.component.ts (v1):

@Component({ selector: 'key-up1', template: ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v1 { values = ''; /*// Nicht stark typisiert onKey(event:any) { this.values += event.target.value + ' | '; }*/ //Stark typisiert onKey(event: KeyboardEvent) { this.values += (<HTMLInputElement>event.target).value + ' | '; } }

Im obigen Code lauschen wir auf ein Ereignis und erfassen die Benutzereingabe. Angular speichert das Ereignisobjekt in der Variablen $event.

Die Methode onKey() der Komponente wird verwendet, um die Benutzereingabe aus dem Ereignisobjekt zu extrahieren und den eingegebenen Wert dann zur Eigenschaft values hinzuzufügen.

Benutzereingaben von einer Vorlagenreferenzvariable abrufen

Sie können Benutzerdaten anzeigen, indem Sie eine lokale Vorlagenvariable verwenden. Eine Vorlagenreferenzvariable wird erstellt, indem vor einen Bezeichner ein Rautezeichen (#) gesetzt wird.

Das folgende Beispiel veranschaulicht die Verwendung einer lokalen Vorlagenvariablen:

Datei app/loop-back.component.ts:

@Component({ selector: 'loop-back', template: ` <input #box (keyup)="0"> <p>{{box.value}}</p> ` }) export class LoopbackComponent { }

Wir<input>haben am Element eine benannteboxVorlagenreferenzvariable definiert.boxDie Variable verweist auf<input>das Element selbst, was bedeutet, dass wir denvalueWert des Eingabeelements abrufen und ihn über einen Interpolationsausdruck im<p>-Tag anzeigen können.

Wir können Vorlagenreferenzvariablen verwenden, um das obige keyup-Beispiel zu modifizieren:

Datei app/keyup.components.ts (v2):

@Component({ selector: 'key-up2', template: ` <input #box (keyup)="onKey(box.value)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v2 { values = ''; onKey(value: string) { this.values += value + ' | '; } }

Filterung von Tastaturereignissen (über key.enter)

Wir können den Wert des Eingabefelds erst abrufen, wenn der Benutzer die Eingabetaste (Enter) drückt.

Der (keyup)-Ereignishandler lauscht auf jeden Tastendruck. Wir können Tastendrücke filtern, indem wir beispielsweise jedes $event.keyCode überprüfen und die Eigenschaft values nur dann aktualisieren, wenn die Eingabetaste gedrückt wird.

Angular kann Tastaturereignisse für uns filtern, indem es an das Pseudoereignis keyup.enter von Angular bindet, um auf die Eingabetaste zu lauschen.

Datei app/keyup.components.ts (v3):

@Component({ selector: 'key-up3', template: ` <input #box (keyup.enter)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v3 { values = ''; }

blur-Ereignis (Verlust des Fokus)

Als Nächstes können wir das blur-Ereignis (Verlust des Fokus) verwenden, welches die Eigenschaft values aktualisiert, nachdem das Element den Fokus verliert.

Das folgende Beispiel lauscht sowohl auf das Drücken der Eingabetaste als auch auf das Verlassen des Fokus des Eingabefelds.

Datei app/keyup.components.ts (v4):

@Component({ selector: 'key-up4', template: ` <input #box (keyup.enter)="values=box.value" (blur)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v4 { values = ''; }

Der in diesem Artikel verwendete Quellcode kann über die folgenden Methoden heruntergeladen werden, ausgenommen der Verzeichnisse node_modules und typings.

Quellcode-Download

Weitere Erweiterungen