Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo enlazar eventos en AngularJS

 

Queremos que el usuario pueda realizar una acción y hacer que suceda algo en la página. Los usuarios ingresarán texto en los cuadros de entrada, seleccionarán elementos de las listas y harán clic en los botones. Estos tipos de acciones del usuario dan como resultado un flujo de datos de un elemento a un componente. La escucha de ciertos eventos, como pulsaciones de teclas, movimientos del mouse y clics, se realiza con el enlace de eventos Angular. La acción más común que puede realizar un usuario es un evento de clic. Algunos de los eventos comunes de JavaScript incluyen onclick , onmouseover , onmouseout , onchange , onkeydown , onkeyup y muchos más. Podemos configurar un evento de clic en Angular usando una sintaxis especial.


(clic) = "methodToRun ()"

En la plantilla angular virtual-machines.component.html , si desea responder a un evento de clic, puede utilizar esta forma de enlace.

El (clic) dice, "oye, estamos escuchando que el usuario haga clic". La parte = ”onCreateVM ()” del marcado dice, “ejecuta este fragmento de código cuando se hace clic”.


Configure el archivo .ts para responder

En nuestra plantilla, ahora tenemos configurado un detector de eventos de clic. Cuando hace clic, queremos que suceda algo. Para configurar esto, primero crearemos una nueva variable para mantener un estado inicial de datos. Esta será la vmCreatedvariable que vemos aquí en virtual-machines.component.ts .

Además de la nueva variable, también necesitamos el nuevo método o función que se supone que debe ejecutarse cuando se hace clic en el botón. Habíamos nombrado a esa función onCreateVM en la plantilla. Eso significa que agregaremos esa función nombrada al archivo de TypeScript así:


Hacer referencia a los datos en la plantilla

Finalmente, generamos el contenido de la variable vmCreated mediante la interpolación de cadenas. Al cargar la página, debería generar el valor inicial de la variable. Cuando el usuario hace clic en el botón, ese valor debería cambiar, lo que también actualizará la interfaz de usuario en tiempo real.

Verificar el resultado en el navegador nos da ese resultado esperado. Inicialmente, la página se carga mostrando la cadena que está almacenada en la variable vmCreated . Luego, hacemos clic en el botón y se ejecuta nuestra función onCreateVM . Esto cambia los datos almacenados en la variable vmCreated , y la página se actualiza para reflejar eso en tiempo real. Hay muchas formas de reaccionar a la entrada del usuario en Angular , este fue solo un ejemplo de cómo reaccionar al clic de un botón.


(entrada) = "onMethodToRun ($ evento)"

Hablando de la entrada del usuario, configuremos un campo <input> que permitirá al usuario proporcionar un nombre para la VM antes de crearla. Eso $eventes especial. Es como un nombre de variable reservado que puede usar en la plantilla durante el enlace de eventos. Es una forma de obtener los datos de esa entrada cuando se activa. Así es como configuraremos la plantilla virtual-machines.component.html para esta prueba.

Ahora podemos aceptar esos datos en el onSetVmNamemétodo en virtual-machines.component.ts .

Con esto, podemos ver que de hecho estamos capturando los datos que se están escribiendo en el campo de entrada.

Enlace de datos bidireccional

En el código anterior, tomamos el camino largo para configurar el enlace de datos. Un enfoque más sencillo es simplemente utilizar la [(ngModel)]directiva.

Observará que también establecemos el atributo de nombre usando name = ”vmName”. La razón de esto es que si lo omite, es posible que vea un error como "ERROR Error: si ngModel se usa dentro de una etiqueta de formulario, se debe establecer el atributo de nombre o el control de formulario debe definirse como 'independiente' en ngModelOptions . "

Probar el enlace de datos usando [(ngModel)] = ”vmName” parece estar funcionando bien. También tenga en cuenta que ya no necesitamos el método onSetVmName (evento) en virtual-machines.component.ts ya que ngModel lo está manejando automáticamente.

Poniendolo todo junto

En esta etapa, queremos poder escribir la entrada, pero no mostrarla en la pantalla de inmediato. Capturaremos esos datos, pero solo los mostraremos en la pantalla una vez que el usuario haga clic en el botón. Para hacer esto, podemos actualizar el método onCreateVM () para hacer uso de los datos capturados como tal.

Esto nos da el resultado final que se parece a esto.


Publicar un comentario

0 Comentarios