Entrada de usuario en Angular 2

Cuando el usuario hace clic en un enlace, pulsa un botón o escribe texto, estas interacciones del usuario disparan eventos del DOM.

En este capítulo, aprenderemos a utilizar la sintaxis de vinculación de eventos de Angular para vincular estos eventos.

La siguiente imagen GIF demuestra el funcionamiento de este ejemplo:

El código fuente se puede descargar al final del artículo.

Vinculación a eventos de entrada de usuario

Podemos usar el mecanismo de vinculación de eventos de Angular para responder a cualquier evento del DOM.

El siguiente ejemplo vincula el evento de clic:

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

El (click) a la izquierda del signo igual indica que el evento de clic del botón es el objetivo de la vinculación. A la derecha del signo igual, el texto entre comillas es una declaración de plantilla.

El código completo es el siguiente:

Archivo app/click-me.component.ts:

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

Obtener la entrada del usuario mediante el objeto $event

Podemos vincularnos a todos los tipos de eventos.

Probemos a vincular el evento keyup de un campo de entrada y mostrar en pantalla lo que el usuario ha escrito.

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

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

En el código anterior, escuchamos un evento y capturamos la entrada del usuario. Angular guarda el objeto de evento en la variable $event.

El método onKey() del componente se utiliza para extraer la entrada del usuario del objeto de evento y luego acumular el valor ingresado en la propiedad values.

Obtener la entrada del usuario desde una variable de referencia de plantilla

Puedes mostrar los datos del usuario utilizando una variable de plantilla local. La variable de referencia de plantilla se crea anteponiendo el símbolo de numeral (#) al identificador.

El siguiente ejemplo demuestra cómo usar una variable de plantilla local:

Archivo app/loop-back.component.ts:

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

En el<input>elemento definimos una variableboxde referencia de plantilla llamada.boxLa variable hace referencia al<input>elemento en sí, lo que significa que podemos obtener elvaluevalor del elemento input, y mostrarlo mediante interpolación en la<p>etiqueta.

Podemos usar la variable de referencia de plantilla para modificar el ejemplo de keyup anterior:

Archivo 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 + ' | '; } }

Filtrado de eventos de teclado (mediante key.enter)

Podemos obtener el valor del campo de entrada solo cuando el usuario presiona la tecla Enter.

El manejador de eventos (keyup) capturará cada pulsación de tecla. Podemos filtrar las teclas, por ejemplo, mediante $event.keyCode, y actualizar la propiedad values solo cuando se presiona Enter.

Angular puede filtrar los eventos de teclado por nosotros, vinculando el evento de tecla Enter mediante el pseudo-evento keyup.enter de Angular.

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

Evento blur (pérdida de foco)

A continuación podemos usar el evento blur (pérdida de foco), que puede actualizar la propiedad values cuando el elemento pierde el foco.

El siguiente ejemplo escucha tanto el evento de pulsar Enter como el evento de pérdida de foco del campo de entrada.

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

El código fuente utilizado en este artículo se puede descargar de la siguiente manera; no incluye los directorios node_modules ni typings.

Descargar el código fuente

Otras extensiones