Breaking

Post Top Ad

Your Ad Spot

lunes, 28 de septiembre de 2020

Tuberías angulares y enlace de datos

 


En este tutorial, continuaremos construyendo nuestra aplicación de visor de juegos y agregaremos nuevas funciones a medida que avanzamos. Veremos cómo podemos usar el enlace de datos de propiedad para establecer propiedades de imagen en nuestro componente, luego las usaremos en la plantilla para mostrar una imagen para cada juego. A partir de ahí, usaremos el enlace de eventos para permitir que el usuario haga clic en un botón que hará que la imagen desaparezca y luego vuelva a aparecer. Después de eso, revisaremos el enlace bidireccional con ngModel y un elemento de entrada. Finalmente, veremos cómo se pueden usar Pipes en Angular para transformar datos enlazados.


Vinculación de propiedad para mostrar una imagen

En el componente podemos usar el enlace de propiedad para establecer el ancho de la imagen, así como el margen de la imagen que mostraremos para nuestros juegos.
game-list.component.ts

Luego, en el archivo de plantilla asociado, se puede acceder a esas propiedades de clase usando la sintaxis [attributename] = 'attributevalue' . Tenga en cuenta que los atributos src y title provienen de las propiedades de la clase, mientras que el ancho y el margen provienen de esos datos json en la matriz de juegos.
game-list.component.html

¡Ok, ahora tenemos imágenes para nuestros juegos!
enlace de propiedad angular para css


Enlace de eventos para responder al clic del botón

Recuerde que la vinculación de eventos es el acto de escuchar que suceda un evento en el DOM y luego enviar un mensaje al código del componente cuando se activa el evento. En el componente, podemos configurar una propiedad de showImagey establecerla en verdadero o falso para mostrar o no mostrar la imagen. De forma predeterminada, se mostrará, por lo que se establece en verdadero. Además, agregamos el toggleImage()método que simplemente muestra una imagen si no hay ninguna, o la elimina si ya está presente.

game-list.component.ts

La plantilla ahora tendrá un clic incluso registrado a través de (clic) = 'toggleImage ()' , y luego un operador ternario simple cambiará el texto dentro del botón según si hay una imagen presente o no con {{showImage? 'Ocultar': 'Mostrar'}} Imagen . Un operador ternario es como un atajo para una declaración if. El código aquí dice si la imagen está presente, entonces muestra "Ocultar". Si la imagen no está allí, muestre "Mostrar". Usamos esto en combinación con la directiva estructural* ngIf que aprendimos recientemente acerca de agregar o eliminar dinámicamente el elemento <img> del dom.

game-list.component.html

Aquí está el resultado que obtenemos.


Encuadernación bidireccional

Angular usa una sintaxis conocida como Banana In A Box para significar un enlace bidireccional. Se nombra un plátano en una caja a causa de esta sintaxis: [()]Usaremos esa sintaxis para configurar el enlace de datos bidireccional en la entrada de texto que se usará para filtrar la lista de juegos. Por el momento, no tenemos configurado el filtrado, pero podemos ver cómo funciona el enlace bidireccional a continuación. Primero necesitamos importar el FormsModule en app.module.ts, de lo contrario habrá errores como No se puede enlazar a ngModel ya que no es una entrada de propiedad conocida .

app.module.ts

En el componente, agregamos una nueva propiedad de clase de listItemEsto se vinculará a la entrada de texto en la plantilla para que cuando el valor cambie en la plantilla, el valor en la clase también se actualice.
game-list.component.ts

En la plantilla, esa propiedad ahora está vinculada usando [(ngModel)] = ”listItem” . Además, hacemos un buen uso de ese operador ternario nuevamente para cambiar si el texto al lado del cuadro de entrada muestra "Filtrado por" o "No filtrado".

game-list.component.html

Puede ver que si hay un término de filtro en la entrada, el texto muestra "Filtrado por". Sin embargo, si eliminamos el término de filtro a ningún carácter, ahora se muestra como "Sin filtrar".

Tubo de moneda angular

Las tuberías son una buena característica para usar en Angular. Las tuberías proporcionan un medio para transformar datos enlazados en una plantilla angular. Hay varias tuberías integradas y también puede construir tuberías personalizadas si lo desea. Una tubería toma un valor y luego devuelve un valor. El uso más común es para transformaciones simples de datos. Primero veremos la canalización de moneda incorporada y la usaremos para formatear el precio de nuestros juegos. Verás que la sintaxis es muy simple.

game-list.component.html

ejemplo de tubería de moneda angular


Tubo angular en minúsculas

Otra tubería ordenada es la tubería en minúsculas. A continuación, lo agregaremos para que todos los números de pieza o códigos de juego de cada juego se transformen de un formato de mayúsculas a un formato de minúsculas.

game-list.component.html

ejemplo de tubería angular en minúsculas


Resumen

A medida que agregamos funciones, trabajamos con los cuatro tipos diferentes de enlace en Angular que son Interpolación, Enlace de propiedades, Enlace de eventos y Enlace bidireccional. El gráfico a continuación muestra la dirección de cada tipo de enlace entre DOM (Plantilla) y Componente (Clase).
cuatro tipos de enlace de datos angulares

Si hay datos en la clase de componente que no están en el formato necesario para mostrarse en la plantilla, entonces puede utilizar Pipes para realizar una transformación de datos. Esto a menudo hace que la pantalla sea más fácil de usar para el usuario.

  • El carácter Pipe |se usa para hacer uso de un Pipe
  • El nombre de la tubería es obligatorio, como lowercase
  • Los parámetros de la tubería están separados por dos puntos. Mire el ejemplo de moneda anterior para ver esto en acción


No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas