Angular Directivas estructurales

Cuando se trata de controlar la apariencia de los elementos del árbol visual en WPF, la forma más común es usar convertidor de binding y visibilidad, lo que requiere algo de lógica adicional y recursos estáticos. Angular también tiene una técnica similar, que cambia la apariencia o el comportamiento de un elemento DOM: las directivas Angular. Uno de los Angulardirectives tipos es questructural directives: cambian la disposición del DOM añadiendo o eliminando elementos del DOM.

En este tema, vamos a demostrar las siguientes tres directrices estructurales:ngIf yngSwitch.ngFor Como se puede deducir por sus nombres, cada uno de estos puede compararse con una estructura en C#. EsngIf lo mismo que un bloque de código "if-else" en C#,ngSwitch es lo mismo que la sentencia switch-case en C# y, por último, esngFor exactamente lo mismo que un "for-loop" en C#.

ngIf Directive

Vamos a explorar cada una de estas directrices, empezando por langIf. Esta directiva nos permite mostrar u ocultar elementos basándonos en una condición booleana. Comenzaremos creando un elemento "div" con una etiqueta "h2" que contenga un nombre.

<div>
  <h2>John</h2>
</div>

Si guardamos esto, nuestro navegador mostrará el nombre John. Sin embargo, supongamos que tenemos algún tipo de expresión booleana en la que queremos basar la condición de la visibilidad de esta etiqueta "h2". Por ejemplo, vamos a añadir una propiedad llamada "isFirstName" y la pondremos en false. Para indicar que nuestro div se renderice cuando isFirstName es igual a verdadero, deberíamos usar la siguiente sintaxis*ngIf = "isFirstName".

public isFirstName = false;

<div *ngIf="isFirstName">
  <h2>John</h2>
</div>

Una vez que guardemos los archivos, y porque isFirstName es falso, veremos que el nombre ya no se muestra en el navegador. Sin embargo, si actualizamos isFirstName para que sea verdadero, el nombre de pila "John" se renderizaría en el navegador. Si volvemos a poner isFirstName en false, notaremos que el nombre de pila ya no se muestra en nuestro navegador, sino que está vacío. Ese es el comportamiento por defecto de langif sentencia: si la expresión es verdadera, renderizamos la plantilla proporcionada, de lo contrario está vacía.

Si tuviéramos que lograr el mismo comportamiento con WPF, necesitaríamos utilizar un convertidor de visibilidad. El código sería similar al siguiente:

public bool IsFirstName { get; set; }
public Sample()
  {
      InitializeComponent();
      this.DataContext = this;
      this.IsFirstName = true;
  }

<UserControl.Resources>
  <BooleanToVisibilityConverter x:Key="VisibleIfTrueConverter" />
</UserControl.Resources>
<Grid>
  <Label Visibility="{Binding Path=IsFirstName, Converter={StaticResource VisibleIfTrueConverter}}">John</Label>
</Grid>

En Angular, es mucho más fácil y sencillo.

Creemos un requisito que indique que si laisFirstName propiedad es falsa, queremos proporcionar un apellido en su lugar. Para ello, vamos a aprovechar la cláusula de "si no" de langIf directiva. Empecemos creando unang-template etiqueta definitoria "h2" que contenga el apellido. Anng-template es simplemente un marcador de posición que nos permite definir contenido que no forma parte del DOM, pero que puede añadirse mediante código, como usando langIf directiva. Pero, para usar esto en la directiva, necesitamos darle un nombre de referencia plantilla como "apellido". Ahora que hemos nombrado a nuestrong-template, vamos a nuestrangIf directiva, añadimos "; else apellido" y guardemos esto. Como "isFirstName" es falso, estamos diciendo que si no usamos el apellido, lo que significa que estamos usando la plantilla con el apellido.

<div *ngIf="isFirstName; else lastname">
  <h2>John</h2>
</div>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

Ahora, otra forma de escribir esto es decir "esNombre; luego nombre; de lo contrario, apellido". Entonces, para hacer eso, necesitamos crear otra plantilla llamada "nombre".

<div *ngIf="isFirstName; then firstname; else lastname">
</div>
<ng-template #firstname>
  <h2>John</h2>
</ng-template>
<ng-template #lastname>
  <h2>Doe</h2>
</ng-template>

Si cambiamos "isFirstName" por true, el nombre de pila se renderizará en el navegador. Y un último consejo sobre cómo usar langIf directiva es que la expresión no está limitada a una sola propiedad: de hecho, puedes usar múltiples propiedades y/o funciones siempre que la expresión en su conjunto devuelva un resultado booleano. Por ejemplo, incluso podemos usar operadores lógicos como" && isValid || getIsValidName()".

ngSwitch Directive

La siguiente directiva que discutiremos es langSwitch directiva. Esto nos permite comparar una expresión con varias para decidir qué plantillas añadir o eliminar. Supongamos que tenemos elementos "h2" que representan marcas de coches – Chevy, Ford y GMC. Nos gustaría mostrar solo uno de estos elementos basado en el valor de una propiedad "make" que hemos definido en nuestro archivo typescript con un valor predeterminado de "Chevy". Para lograr esto, necesitamos usar langSwitch directiva con la siguiente sintaxis[ngSwitch] = expression donde la expresión es nuestra propiedad "make". Añadir esto al elemento "div" que envuelve las etiquetas "h2" no es suficiente. Como en WPF, necesitamos añadir algunas sentencias "case" a cada elemento "h2". La sintaxis de eso es.*ngSwitchCase = expression En este caso, estamos comparando directamente con el texto, así que añadiremos comillas simples alrededor del valor, lo que significa que el resultado final sería*ngSwitchCase = "'Chevy'" o similar para los otros dos valores.

make = "Chevy";

<div [ngSwitch]="make">
  <h2 *ngSwitchCase="'Chevy'">Chevy</h2>
  <h2 *ngSwitchCase="'Ford'">Ford</h2>
  <h2 *ngSwitchCase="'GMC'">GMC</h2>
</div>

Una vez que guardemos eso, solo veremos la opción de Chevy renderizada en el navegador porque el valor de nuestra propiedad "make" está configurado como "Chevy". Si lo cambiamos, por ejemplo, "GMC" y lo guardamos, solo se renderizará la opción GMC en el navegador. Ahora, ¿qué pasa si añadimos una opción que no está disponible, por ejemplo el "Lambo"? No se rendería nada porque eso no encajaba con ninguna de nuestras condiciones. Cuando normalmente usamos una sentencia switch dentro de C#, no solo tenemos el caso sino también el valor por defecto. Lo mismo está disponible en Angular– podemos añadir otra opción con el texto "No encontrado" y marcarlo con el*ngSwitchDefault que actuará como valor predeterminado si no se encuentra ninguno de los otros valores.

<h2 *ngSwitchDefault>Not Found</h2>

En este caso, si estamos buscando Lambo, no tenemos la opción Lambo, por lo que cambiamos al caso predeterminado que es "No encontrado", y "No encontrado" se muestra en nuestro navegador. Una cosa que debemos señalar es que estas son expresiones, por lo que podemos usar incluso una función siempre que devuelva un resultado que coincida con la expresión que estamos pasando. ¡Bastante simple!

ngFor Directive

Lo siguiente es langFor directiva. Esta directiva nos permite iterar a través de una colección de objetos y añadir una plantilla para cada elemento de esa colección. Empecemos añadiendo una colección de objetos en nuestro archivo typescript. Vamos a llamar a esto una variedad de marcas y añadiremos Chevy, Ford, GMC y Dodge. A continuación crearemos un "div" y para cada "div" crearemos una etiqueta "h2" que lista el nombre de esa marca. Para ello, vamos a usar langFor directiva —la sintaxis para eso*ngFor="let make of makes"—. Eso nos da la capacidad de usar la interpolación para usar la propiedad "make" que se define a través de la parte "let make" de la expresión e imprimirla en la etiqueta "h2".

makes = ["Chevy", "Ford", "GMC", "Dodge"];

<div *ngFor="let make of makes">
  <h2>{{ make }}</h2>
</div>

Si todo ha ido bien, deberíamos ver que para cada elemento de ese array estamos usando una etiqueta h2 para representarlo en el navegador. Además, langFor directiva proporciona algunos elementos auxiliares que nos permiten obtener más información sobre esa colección, tales como:

• "index as i" - nos permite determinar cuál es el índice de cada elemento

<div *ngFor="let make of makes; index as i">
  <h2>{{ i }} - {{ make }}</h2>
</div>

• "first as f": nos permite saber si el artículo es el primero en la colección.

<div *ngFor="let make of makes; first as f">
  <h2>{{ f }} - {{ make }}</h2>
</div>

• "último como l": también puede obtener la última fila o el último elemento de la colección

<div *ngFor="let make of makes; last as l">
  <h2>{{ l }} - {{ make }}</h2>
</div>

• "impar como o" o "par como e": nos permite determinar si el elemento de la colección está en una posición par o impar

<div *ngFor="let make of makes; odd as o">
  <h2>{{ o }} - {{ make }}</h2>
</div>

Así de fácil es agregar y eliminar elementos a su vista en su aplicación angular: simplemente use una directiva estructural y listo.

Additional Resources

• Del escritorio a la web: Directivas estructurales en Angular
• Angular Directivas estructurales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub