Este artículo lo guiará a través del patrón de directiva estructural en Angular, le presentará qué es la directiva estructural y cómo usarla. ¡Espero que le sea útil!
Curso de entrada al dominio de front-end (vue): ingrese al aprendizaje
En Angular , hay dos tipos de directivas. Las directivas de atributos modifican la apariencia o el comportamiento de los elementos DOM . Las directivas estructurales agregan o eliminan elementos DOM .
Las directivas estructurales son una de las características más poderosas de Angular , pero con frecuencia se malinterpretan.
Si está interesado en aprender sobre directivas de estructura, sigamos leyendo y descubramos qué son, para qué sirven y cómo utilizarlas en sus proyectos. [Tutoriales relacionados recomendados: "tutorial angular"]
En este artículo, aprenderá sobre el patrón directivo estructural Angular . Sabrás qué son y cómo utilizarlos.
Después de estudiar este artículo, comprenderá mejor estas instrucciones y las utilizará en proyectos reales.
Las directivas estructurales Angular son directivas que pueden cambiar la estructura DOM . Estas instrucciones pueden添加、移除或者替换元素. Las directivas estructurales tienen un símbolo * antes de su nombre.
En Angular , hay tres directivas estructuradas estándar.
*ngIf : incluye condicionalmente una plantilla basada en el valor booleano devuelto por la expresión (es decir, representación condicional de la plantilla)
*ngFor - iterar sobre una matriz
*ngSwitch : representa cada gráfico coincidente
A continuación se muestra un ejemplo de una directiva estructurada. La sintaxis se ve así:
<elemento ng-if="Condición"></elemento>
Las declaraciones condicionales deben ser true o false .
<div *ngIf="trabajador" clase="nombre">{{trabajador.nombre}}</div> Angular genera un elemento <ng-template> y luego aplica la directiva *ngIf . Esto lo convierte en un enlace de propiedad entre corchetes [] , como [ngIf] . El resto del <div> , incluido el nombre de la clase, se inserta en <ng-template> . Por ejemplo:
<ng-plantilla [ngIf]="trabajador">
<div class="nombre">{{trabajador.nombre}}</div>
</ng-plantilla> Para usar directivas estructurales, necesitamos agregar un elemento con la directiva en la plantilla HTML . Luego agregue, elimine o reemplace elementos según las condiciones o expresiones que establezcamos en la directiva.
Agreguemos un código HTML simple.
El contenido del archivo app.component.html es el siguiente:
<div estilo="text-align:centro"> <h1> Bienvenido </h1> </div> <h2> <aplicación-ilustraciones></aplicación-ilustraciones></h2>
*ngIf Usamos *ngIf para determinar si mostrar o eliminar un elemento según las condiciones. ngIf es muy similar a if-else .
La directiva *ngIf elimina elementos HTML cuando la expresión es false . Cuando true , se agregará una copia del elemento DOM .
El código *ngIf completo es el siguiente:
<h1> <button (click)="toggleOn =!toggleOn">ilustración ng-if</button> </h1> <div *ngIf="!toggleOn"> <h2>Hola </h2> <p>Buenos días, haz clic en el botón para ver</p> </div> <hora> <p>Hoy es lunes y este es un elemento de texto ficticio para hacerte sentir mejor</p> <p>Comprensión de la directiva ngIf con la cláusula else</p>
*ngFor Usamos la directiva *ngFor para iterar sobre la matriz. Por ejemplo:
<ul>
<li *ngFor="dejemos trabajar a los trabajadores">{{ wok }}</li>
</ul> Nuestro archivo TypeScript componente:
importar {Componente, OnInit} desde '@angular/core';
@Componente({
selector: 'ilustraciones de aplicaciones',
URL de plantilla: './ilustraciones.component.html',
URL de estilo: ['./ilustraciones.component.css']
})
exportar clase IllustrationsComponent implementa OnInit {
trabajadores: cualquiera = [
'trabajador 1',
'trabajador 2',
'trabajador 3',
'trabajador 4',
'trabajador 5',
]
constructor() { }
ngOnInit(): nulo {
}
}*ngSwitchTraductor agregado: Este comando es muy útil en el desarrollo real
Usamos ngSwitch para decidir qué elemento representar en función de diferentes declaraciones condicionales. La directiva *ngSwitch es muy similar a switch que utilizamos. Por ejemplo:
<div [ngSwitch]="Mis compras"> <p *ngSwitchCase="'tazas'">tazas</p> <p *ngSwitchCase="'veg'">Verduras</p> <p *ngSwitchCase="'ropa'">Pantalones</p> <p *ngSwitchDefault>Mis compras</p> </div>
En typescript :
Mis compras: string = '';
Tenemos una variable MyShopping que tiene un valor predeterminado y se usa para representar elementos específicos en el módulo que cumplen con las condiciones.
Cuando el valor de la condición es true , los elementos relevantes se representarán en DOM y los elementos restantes se ignorarán. Si ningún elemento coincide, el elemento *ngSwitchDefault se representa en DOM .
Si desea agregar o eliminar un elemento del DOM , debe usar directivas de estructura. Por supuesto, también podemos usarlos para cambiar los estilos CSS de los elementos o agregar detectores de eventos. Incluso puedes usarlos para crear un nuevo elemento que no existía antes.
La mejor regla es: cuando pensamos en manipular el DOM, es hora de usar directivas estructurales .
Las directivas estructurales son una parte importante de Angular y podemos usarlas de muchas maneras.
Espero que a través de este artículo los lectores puedan comprender mejor cómo utilizar estas instrucciones y cuándo utilizar estos modos.