Post Top Ad

Your Ad Spot

jueves, 25 de junio de 2020

Directivas estructurales angulares

Cuando construimos una interfaz de usuario usando Angular, necesitamos una plantilla válida definida en línea o en un archivo html dedicado. La plantilla en sí se crea usando html, y para otorgarle poderes especiales a html, se utilizan enlaces de datos angulares y directivas. Angular facilita la creación de estas interfaces de usuario, ya que el enlace de datos permite mostrar datos dinámicos y los eventos permiten que la aplicación Angular responda adecuadamente a las acciones del usuario. Las directivas angulares proporcionan la capacidad de agregar lógica a html, que es algo que no tiene por defecto.

Ventajas de una plantilla en línea

Hasta ahora, hemos comenzado creando una plantilla en línea en el app.component.tsarchivo. Si bien no siempre es la mejor opción, existen algunas ventajas.
  • La plantilla se define directamente dentro del componente asociado.
  • Mantiene la vista y el código para esa vista en un solo lugar
  • Facilita la combinación de enlaces de datos con propiedades de clase más fáciles

Crear una plantilla vinculada

Incluso con las ventajas enumeradas anteriormente, a menudo tiene sentido usar una plantilla vinculada . Las plantillas en línea no funcionan tan bien con varias herramientas de desarrollo IDE como Visual Studio Code, Jetbrains Webstorm y otras. A menudo, las funciones de intellisense como el formato automático no funcionarán. Entonces, a medida que aumenta la cantidad de html requerida, se vuelve más fácil aprovechar ese enfoque de plantilla vinculada. Construyamos un componente que pueda enumerar videojuegos.

Crear un componente de la lista de juegos

Por convención, tiene sentido crear carpetas dedicadas para contener cada componente. Como tal, primero podemos crear una gamescarpeta para contener el componente relacionado con los juegos.
nuevo directorio para contener componente angular
Ahora agreguemos la plantilla para el componente de la lista de juegos en esa nueva carpeta. Se llamará game-list.component.html .
crear un nuevo archivo de plantilla angular
En nuestro archivo de plantilla, el siguiente html se puede usar para comenzar a crear un diseño para mostrar algunos juegos.
El archivo de plantilla ahora está en su lugar. Lo siguiente que debe hacer es crear el componente en sí. Lo llamaremos game-list.component.ts .
archivo de mecanografía angular
El siguiente código de Typecript importará el decorador de componentes desde el núcleo angular, definirá el selector, vinculará a la plantilla que acabamos de crear usando la templateUrlpropiedad y, por último, configurará una pageTitlepropiedad simple para que podamos usar esos datos en la vista.
Si su IDE le envía un mensaje como ng: el componente 'GameListComponent' no está incluido en un módulo y no estará disponible dentro de una plantilla. Considere agregarlo a una declaración NgModule , no se preocupe, lo arreglaremos pronto.

Uso de un componente como directiva

Cuando un componente tiene un selector definido como lo hicimos anteriormente usando la lista de juegos , podemos usar el componente como una directiva. Qué significa eso? Significa que podemos usar el selector de lista de juegos como un elemento html en la plantilla de cualquier otro componente. Entonces, para poner la plantilla game-list.component.html dentro de app.component.ts, por ejemplo, podemos hacerlo así.

Configurar el módulo angular

Para usar un componente como directiva, Angular necesita saber cómo representar ese elemento html personalizado. Para que esto suceda, se debe configurar el módulo angular asociado con este componente. Cada aplicación angular necesita tener al menos un módulo angular y este suele ser el AppModule . Un componente debe pertenecer a un solo módulo angular. Entonces, cuando un componente contiene una directiva, Angular mira ese módulo de componentes para ver qué directivas son visibles para ese componente. Esto significa que debemos declarar o importar ese componente en el AppModule.

Probar la aplicación

¡Okay! Con todo ese trabajo fuera del camino, podemos iniciar la aplicación y ver qué obtenemos. Navegue hasta el directorio raíz de su proyecto y ejecute el ng servecomando. Cuando visitamos la aplicación en el navegador, ¡parece que pudimos hacer funcionar nuestra directiva personalizada! Hemos utilizado el componente de la lista de juegos como directiva.
directiva personalizada angular

Agregar datos dinámicos

En este momento solo hay datos estáticos en la aplicación. Cambiemos eso usando el enlace de datos . Lo primero que podemos hacer es visitar el archivo game-list.component.html y eliminar el título de página codificado y reemplazarlo con una interpolación como {{pageTitle}}.
Ahora en el archivo game-list.component.ts , podemos establecer esa propiedad. ¡Lo configuraremos en dinámico! Lista de juegos solo para que sea algo diferente del valor codificado que teníamos anteriormente.
Si volvemos a visitar la aplicación, ahora debería mostrar los datos para esa pageTitlevariable, ¡y lo hace!
interpolación unidireccional angular

Introduciendo Angular * ngIf

Aprendimos que una directiva es un elemento o atributo html personalizado que tiene poderes especiales más allá del html normal. Las directivas son personalizadas e integradas. La directiva * ngIf es una de esas directivas angulares incorporadas. Se utiliza para agregar lógica al html, y también se conoce como directiva estructural . Esto se debe a que tiene la capacidad de modificar el diseño o la estructura de una plantilla agregando, eliminando o manipulando elementos y sus elementos secundarios. Si una directiva angular comienza con un asterisco ( * ), entonces sabe que es una directiva estructural . Veamos esto en acción.
Solo queremos mostrar la tabla que muestra los juegos, cuando hay juegos para mostrar. Si no hay juegos, entonces no tiene sentido mostrar la tabla. Entonces, para simular que no hay juegos para mostrar, crearemos una gamespropiedad en el archivo game-list.component.ts y la configuraremos en una matriz vacía.
Ahora, en el archivo de plantilla real, podemos usarlo *ngIfpara verificar si hay algún juego disponible para mostrar. Lo que esto hará es permitir que el elemento <table> aparezca o desaparezca en función de esa condición.
Como no hay juegos para mostrar, la tabla ya no debería aparecer. ¡Se ve bien!
ejemplo angular ngif

Presentamos Angular * ngFor

En Angular, necesitará la capacidad de recorrer las colecciones de elementos y mostrarlos. En nuestro caso, una vez que tengamos algunos juegos con los que trabajar, deberíamos poder recorrerlos y mostrarlos en nuestra tabla. Para hacer esto, podemos usar *ngForEsta directiva estructural repite una parte del árbol dom una vez para cada elemento en una lista iterable, como una matriz. Lo que haremos es completar la gamesvariable en game-list.component.ts con algunos datos JSON para representar un par de juegos. En el futuro, configuraremos esto como un servicio para obtener datos del servidor.
Ahora, en game-list.component.html podemos hacer uso de esa directiva estructural * ngFor para recorrer los dos juegos.
El resultado en el navegador ahora es que los dos juegos se repiten y vemos sus datos en la página.
ng angular por ejemplo

Una nota sobre para de vs para en

En el ejemplo anterior, vemos que * ngFor hizo uso de for of looping construct. Esto se debe a que el for ofbucle puede iterar sobre cualquier tipo iterable como una matriz. Produce el valor almacenado en cada índice, no el índice en sí. for ofpor el contrario produce el valor del índice, tales como 0, 1, 2, etc ... Se puede pensar en para en como un índice de iterador específica.

En resumen

  • Plantillas
    • En línea
      • Se usa mejor con una longitud de marcado más corta
      • Hace uso de la templatepropiedad
      • Puede usar comillas dobles o simples para plantillas de una sola línea
      • Utiliza ticks de retroceso para plantillas de líneas múltiples
      • Sin formato inteligente o de código automático
    • Plantillas vinculadas
      • Mejor una vez que el marcado html se hace más largo
      • Utiliza la templateUrlpropiedad
      • Define una ruta al archivo de plantilla html
  • Componentes como directivas
    • Utilice el elemento como directiva en el componente, como <game-list> </game-list>
    • Declare el componente en el módulo asociado utilizando la declarationsmatriz
  • Interpolación
    • Es un enlace de datos unidireccional
    • Los datos viajan de la propiedad de clase a la propiedad del elemento
    • Definido usando {{}} llaves
  • Directivas estructurales
    • prefijado con un asterisco *carácter
    • Asignado a una expresión de cadena entre comillas
    • * ng Si se usa para agregar o eliminar un elemento y sus elementos secundarios del Dom
    • Basado en una expresión que se evalúa como verdadera o falsa
    • * ngFor se usa para repetir un elemento y sus elementos secundarios en el dom.
    • Use let como el tipo de variable local en el ciclo
    • Utilice "de" no "en" al crear la expresión

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas