Sintaxis de plantillas Angular 2

En los capítulos anteriores ya hemos visto las plantillas de Angular; en este artículo presentaremos en detalle el uso de la sintaxis de Angular.

La plantilla desempeña el papel de una vista, en pocas palabras, es la parte que se muestra al usuario.

  • HTML
  • Expresión de interpolación
  • Expresión de plantilla
  • Sentencia de plantilla
  • Sintaxis de enlace
  • Enlace de propiedades
  • Atributos HTML, enlace de class y style
  • Enlace de eventos
  • Enlace de datos bidireccional con NgModel
  • Directivas incorporadas
  • * y <template>
  • Variables de referencia de plantilla
  • Propiedades de entrada y salida
  • Operadores de expresiones de plantilla

HTML

HTML es el "lenguaje" de las plantillas de Angular. Aparte del elemento <script>, que está prohibido, todos los demás elementos HTML son compatibles, por ejemplo:

<h1>Mi primera aplicación Angular</h1>

Expresión de interpolación

El formato de sintaxis de la expresión de interpolación es:{{ ... }}。

La expresión de interpolación puede insertar cadenas calculadas en el HTML y también puede usarse como valor de atributo.

<h3> {{title}} <img src="{{imageUrl}}" style="height:30px"> </h3>

Expresión de plantilla

{{ ... }}En su interior hay en realidad una expresión de plantilla; Angular la evalúa y la convierte en una cadena de salida.

El siguiente ejemplo suma dos números:

<!-- "The sum of 1 + 1 is 2" --> <p>The sum of 1 + 1 is {{1 + 1}}</p>

Podemos usargetVal()para obtener el valor de esta expresión:

<div class="example"> <div class="example_code"> [mycode3 type="html"] <!-- "4" --> <p>{{1 + 1 + getVal()}}</p>

La expresión de plantilla es similar al lenguaje JavaScript; muchas expresiones de JavaScript también son expresiones de plantilla válidas, pero no todas.

Las siguientes expresiones de JavaScript están prohibidas:

  • Expresiones de asignación (=，+=，-=...）
  • operador new
  • que contengan;o'expresiones de concatenación con
  • operaciones de incremento y decremento (++y--) Otras diferencias notables con respecto a la sintaxis de JavaScript incluyen:
  • No se admiten operadores bit a bit (|y&）
  • Operadores de expresiones de plantilla, como|y?.etc., han recibido nuevos significados.

Enlace de propiedades

El enlace de propiedades de la plantilla puede establecer las propiedades de un elemento de la vista como una expresión de plantilla.

El enlace de propiedades más común es establecer la propiedad de un elemento como el valor de una propiedad del componente. En el siguiente ejemplo, la propiedad src del elemento image se enlaza a la propiedad imageUrl del componente:

<img [src]="imageUrl">

Deshabilitar un botón cuando el componente es isUnchanged (sin cambios):

<button [disabled]="isUnchanged">El botón está deshabilitado</button>

Establecer propiedades de una directiva:

<div [ngClass]="classes">[ngClass] enlazado a la propiedad classes</div>

Establecer las propiedades de un componente personalizado (esta es una vía importante para la comunicación entre componentes padre e hijo):

<user-detail [user]="currentUser"></user-detail>

Atributos HTML (Attribute), enlace de class y style

La sintaxis de plantillas proporciona una forma especial de enlace de datos unidireccional para escenarios donde el enlace de propiedades no es muy adecuado.

Enlace de atributos (Attribute)

Cuando el elemento no tiene una propiedad que pueda enlazarse, se utiliza el enlace de atributos (Attribute) de etiquetas HTML.

Considere atributos (Attribute) como ARIA, SVG y colspan/rowspan en tablas. Son atributos puros. No tienen propiedades correspondientes que se puedan enlazar.

El siguiente ejemplo dará un error:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

Obtendremos este error:

Template parse errors:
Can't bind to 'colspan' since it isn't a known native property

模板解析错误：不能绑定到'colspan'，因为它不是已知的原生属性

Como se indica en el mensaje,<td>el elemento no tiene lacolspanpropiedad. Pero las expresiones de interpolación y el enlace de propiedades solo pueden establecerpropiedades, no Attributes, por lo tanto se necesita el enlace de atributos (Attribute) de etiquetas HTML para crear y enlazar este tipo de Attribute.

El enlace de atributos de etiquetas HTML es sintácticamente similar al enlace de propiedades, pero la parte entre corchetes no es el nombre de una propiedad del elemento, sino que está compuesta por un prefijo attr. y el nombre del atributo de la etiqueta HTML. Luego se establece el valor del atributo HTML mediante una expresión que se evalúa como una cadena. Por ejemplo:

<table border=1> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <tr><td>Five</td><td>Six</td></tr> </table>

Enlace de clases CSS

Con el enlace de clases CSS, podemos agregar y eliminar nombres de clases CSS de la propiedad class del elemento.

El enlace de clases CSS es sintácticamente similar al enlace de propiedades. Pero la parte entre corchetes no es el nombre de una propiedad del elemento, sino que incluye un prefijo class, seguido de un punto (.) y luego el nombre de la clase CSS. Las dos últimas partes son opcionales. Por ejemplo:[class.class-name] 。

El siguiente ejemplo muestra cómo agregar y eliminar la clase "special" mediante el enlace de clases CSS:

<!--Configuración estándar de clases de estilo HTML--> <div class="bad curly special">Bad curly special</div> <!--Restablecer o sobrescribir clases de estilo mediante enlace--> <div class="bad curly special" [class]="badCurly">Bad curly</div> <!--Agregar o eliminar la clase de estilo special mediante el valor de una propiedad--> <div [class.special]="isSpecial">Este estilo es especial</div>

Enlace de estilos style

Mediante el enlace de estilos, se pueden establecer estilos en línea. La sintaxis del enlace de estilos es similar al enlace de propiedades, pero la parte entre corchetes no es el nombre de una propiedad del elemento; el enlace de estilos incluye un style., seguido del nombre de la propiedad de estilo CSS, por ejemplo: [style.style-property].

<button [style.color] = "isSpecial ? 'red': 'green'">Rojo</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Guardar</button> <!--Enlace de estilos con unidades--> <button [style.font-size.em]="isSpecial ? 3 : 1" >grande</button> <button [style.font-size.%]="!isSpecial ? 150 : 50" >Pequeño</button>

Las propiedades de estilo pueden usar la convención de nombres con guiones (font-size) o la convención camelCase (fontSize).

Enlace de eventos

En el enlace de eventos, Angular responde al flujo de datos correspondiente -desde el objetivo de la vista hasta el origen de datos- escuchando las acciones del usuario, como eventos de teclado, eventos de mouse, eventos táctiles, etc.

La sintaxis del enlace de eventos está compuesta por elevento objetivodentro de los paréntesis a la izquierda del signo igual y ladeclaración de plantillaentre comillas a la derecha.

Por ejemplo, en el siguiente caso, el enlace de eventos escucha el evento de clic del botón. Cada vez que se hace clic con el mouse, se llamará alonSave()método del componente.

<button (click)="onSave()">Guardar</button>

El nombre entre paréntesis —por ejemplo (click)— señala el evento objetivo. En el siguiente ejemplo, el objetivo es el evento click del botón.

<button (click)="onSave()">Save</button>

También se puede usar la forma con prefijo on-:

<button on-click="onSave()">On Save</button>

Enlace de datos bidireccional con NgModel

Al desarrollar formularios de entrada de datos, el resultado esperado es tanto mostrar los datos del componente en el formulario como actualizar los datos del componente cuando el usuario los modifica.

A continuación se muestra un ejemplo de enlace bidireccional mediante[(NgModel)]para lograr el enlace bidireccional:

<input [(ngModel)]="currentUser.firstName">

[] logra el flujo de datos desde el componente a la plantilla, () logra el flujo de datos desde la plantilla al componente; al combinar ambos, [()] logra el enlace bidireccional.

Usar la sintaxis con prefijo:

<input bindon-ngModel="currentUser.firstName">

Directivas incorporadas

Las directivas incorporadas de Angular incluyen NgClass, NgStyle, NgIf, NgFor, NgSwitch, etc.

NgClass

Agregar o eliminar clases CSS dinámicamente mediante el enlace a NgClass.

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >Este div es de gran tamaño.</div>

NgStyle

NgStyle, al enlazarlo a un objeto de control key:value, nos permite establecer muchos estilos en línea a la vez.

nombre de la propiedad CSS

Agregando un enlace de propiedad NgStyle, se llama a setStyles y se establecen los estilos del elemento en consecuencia:

<div [ngStyle]="setStyles()">Este div tiene estilo italic, peso normal y extra grande (24px).</div>

NgIf

Al enlazar la directiva NgIf a una expresión verdadera, se puede agregar un elemento y sus elementos secundarios al árbol DOM.

<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>

Por el contrario, enlazarlo a una expresión falsa eliminará el elemento y sus elementos secundarios del árbol DOM. Por ejemplo:

<!--Debido a que el valor de isActive es false, User Detail no está en el árbol del DOM--> <user-detail *ngIf="isActive"></user-detail>

NgSwitch

Cuando necesitas mostrar uno de un conjunto de árboles de elementos posibles según una condición, necesitas NgSwitch. Angular solo agregará el elemento seleccionado al DOM. Por ejemplo:

<span [ngSwitch]="userName"> <span *ngSwitchCase="'Zhang San'">Zhang San</span> <span *ngSwitchCase="'Li Si'">Li Si</span> <span *ngSwitchCase="'Wang Wu'">Wang Wu</span> <span *ngSwitchCase="'Zhao Liu'">Zhao Liu</span> <span *ngSwitchDefault>Gran Dragón</span> </span>

El que actúa como directiva padreNgSwitchse vincula a una expresión que devuelve un valor de conmutación; en el ejemplo este valor es una cadena, pero puede ser de cualquier tipo. La directiva padreNgSwitchcontrola un conjunto de<span>elementos hijos. Cada<span>se adjunta a una expresión de valor coincidente o se marca como caso predeterminado. En cualquier momento, como máximo uno de estos spans aparecerá en el DOM. Si el valor coincidente de este span es igual al valor de conmutación, Angular2 agrega este<span>al DOM. Si ningún span coincide, Angular2 agrega el span predeterminado al DOM. Angular2 elimina y destruye todos los demás spans.

Tres directivas que cooperan entre sí:

  • ngSwitch: se vincula a una expresión que devuelve un valor de conmutación
  • ngSwitchCase: se vincula a una expresión que devuelve un valor coincidente
  • ngSwitchDefault: un atributo para marcar el elemento predeterminado*Nota: no se debe usar delante de ngSwitch*。

NgFor

Cuando necesitas mostrar una lista compuesta por múltiples elementos, necesitas esta directiva. Como en el siguiente ejemplo, se aplica NgFor en un bloque HTML.

<div *ngFor="let user of users">{{user.fullName}}</div>

NgFor también se puede aplicar en un elemento de componente, por ejemplo:

<user-detail *ngFor="let user of users" [user]="user"></user-detail>

La directiva ngFor admite un índice opcional, que crece de 0 hasta la longitud del array durante la iteración.

Puedes capturar este índice mediante una variable de entrada de plantilla y usarla en la plantilla. El siguiente ejemplo captura el índice en una variable llamada i.

<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>

NgForTrackBy

La directiva ngFor a veces puede tener un rendimiento deficiente, especialmente en listas grandes. Un pequeño cambio, eliminación o adición de un elemento puede causar operaciones DOM en cascada.

Por ejemplo, cuando se actualiza la libreta de direcciones volviendo a obtener datos del servidor, la lista actualizada puede contener muchos (si no todos) de los contactos mostrados anteriormente. Pero desde la perspectiva de Angular, no sabe cuáles ya existían antes, solo puede limpiar la lista anterior, descartar esos elementos DOM y reconstruir una nueva lista con nuevos elementos DOM.

Para resolver este problema, se puede evitar este esfuerzo mediante una función de seguimiento. La función de seguimiento le dice a Angular: sabemos que dos objetos con el mismo user.id son el mismo contacto. Por ejemplo:

trackByUsers(index: number, user: User){return user.id}

Luego, establece la directiva NgForTrackBy como esa función de seguimiento:

<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}</div>

La función de seguimiento no excluye todos los cambios del DOM. Si la propiedad utilizada para determinar si es el mismo contacto cambia, se actualizará el elemento DOM; de lo contrario, se conservará ese elemento DOM. La interfaz de la lista se volverá más fluida y tendrá una mejor capacidad de respuesta.

Variables de referencia de plantilla

Las variables de referencia de plantilla son referencias a elementos DOM o directivas en la plantilla.

Se pueden usar en elementos DOM nativos y también en componentes de Angular; de hecho, pueden funcionar con cualquier componente web personalizado.

Podemos referenciar una variable de referencia de plantilla en el mismo elemento, en elementos hermanos o en cualquier elemento hijo.

Aquí hay dos ejemplos sobre cómo crear y usar variables de referencia de plantilla:

<!--phone hace referencia al elemento input y pasa `value` al manejador de eventos.--> <input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button> <!--fax hace referencia al elemento input y pasa `value` al manejador de eventos.--> <input ref-fax placeholder="fax number"> <button (click)="callFax(fax.value)">Fax</button>

El prefijo (#) de "phone" significa que vamos a definir una variable phone.

Otras extensiones