El enlace de atributos en Angular le ayuda a establecer valores para attributes directamente. Con attribute vinculante, puede mejorar la accesibilidad, diseñar su aplicación dinámicamente y administrar múltiples clases o estilos CSS simultáneamente.
Vea el ejemplo en vivo para ver un ejemplo funcional que contiene los fragmentos de código en esta guía.
Vinculante a un attribute
Se recomienda que establezca una propiedad de elemento con un enlace de propiedad siempre que sea posible. Sin embargo, a veces no tiene una propiedad de elemento para enlazar. En esas situaciones, puede utilizar attribute vinculante.
Por ejemplo, ARIA y SVG son puramente attributes. Ni ARIA ni SVG corresponden a propiedades de elementos y no establecen propiedades de elementos. En estos casos, debe utilizar attribute vinculante porque no hay objetivos de propiedad correspondientes.
Sintaxis
La sintaxis de enlace de atributo se asemeja al enlace de propiedad, pero en lugar de una propiedad de elemento entre corchetes, antecede el nombre del attribute con el prefix attr
, seguido de un punto. Luego, configura el attribute valor con una expresión que se resuelve en un string.
<p[attr.attribute-you-are-targeting]="expression">p>
Cuando la expresión se resuelve en
null
oundefined
, Angular elimina el attribute en total.
Encuadernación ARIA attributes
Uno de los principales casos de uso de attribute vinculante es establecer ARIA attributes, como en este ejemplo:
<button[attr.aria-label]="actionName">actionName with Ariabutton>
Vinculante a colspan
Otro caso de uso común para attribute la unión es con el colspan
attribute en tablas. Vinculante al colspan
attribute le ayuda a mantener sus tablas dinámicas programáticamente. Dependiendo de la cantidad de datos con los que su aplicación rellene una tabla, la cantidad de columnas que abarca una fila podría cambiar.
Usar attribute vinculante con el
colspan
:
- Especifica el
colspan
attribute utilizando la siguiente sintaxis:[attr.colspan]
. - Colocar
[attr.colspan]
igual a una expresión.
En el siguiente ejemplo, vinculamos el colspan
attribute a la expresión 1 + 1
.
<tr><td[attr.colspan]="1 + 1">One-Twotd>tr>
Esta unión hace que el
A veces existen diferencias entre el nombre de la propiedad y un attribute.
colspan
es un attribute de, tiempo colSpan
con una “S” mayúscula es una propiedad. Cuando usas attribute vinculante, usocolspan
con una “s” minúscula. Para obtener más información sobre cómo enlazar alcolSpan
propiedad, ver elcolspan
ycolSpan
sección de Vinculación de propiedad.Vinculante al
class
attributePuede utilizar el enlace de clases para agregar y eliminar los nombres de clases CSS de un elemento
class
attribute.Enlace a un solo CSS
class
Para crear un enlace de clase única, use el prefix
class
seguido de un punto y el nombre de la clase CSS, por ejemplo,[class.sale]="onSale"
. Angular agrega la clase cuando la expresión enlazada,onSale
es veraz, y elimina la clase cuando la expresión es falsa, con la excepción deundefined
. Consulte delegación de estilo para obtener más información.Enlace a varias clases de CSS
Para enlazar a varias clases, use
[class]
establecido en una expresión, por ejemplo,[class]="classExpression"
. La expresión puede ser una de las siguientes:
- Un espacio delimitado string de nombres de clases.
- Un objeto con nombres de clase como keys y expresiones de verdad o falsedad como valores.
- Un array de nombres de clases.
Con el formato de objeto, Angular agrega una clase solo si su valor asociado es verdadero.
Con cualquier expresión similar a un objeto, como
object
,Array
,Map
, oSet
—La identidad del objeto debe cambiar para que Angular actualice la lista de clases. Actualizar la propiedad sin cambiar la identidad del objeto no tiene ningún efecto.Si hay varios enlaces al mismo nombre de clase, Angular usa la precedencia de estilo para determinar qué enlace usar.
La siguiente tabla resume la sintaxis de enlace de clases.
Tipo de encuadernación Sintaxis Tipo de entrada Valores de entrada de ejemplo Enlace de clase única [class.sale]="onSale"
boolean | undefined | null
true
,false
Encuadernación de varias clases [class]="classExpression"
string
"my-class-1 my-class-2 my-class-3"
Record
foo: true, bar: false
Array
<string
>['foo', 'bar']
Vinculante al estilo attribute
Puede utilizar el enlace de estilo para establecer estilos de forma dinámica.
Vinculación a un solo estilo
Para crear una encuadernación de estilo único, utilice el prefix
style
seguido de un punto y el nombre de la propiedad de estilo CSS, por ejemplo,[style.width]="width"
. Angular establece la propiedad en el valor de la expresión enlazada, que suele ser una string. Opcionalmente, puede agregar una extensión de unidad comoem
o%
, que requiere un tipo de número.Puede escribir un nombre de propiedad de estilo en dash-case o camelCase.
<nav[style.background-color]="expression">nav><nav[style.backgroundColor]="expression">nav>Enlace a varios estilos
Para alternar varios estilos, enlazar al
[style]
attribute-por ejemplo,[style]="styleExpression"
. losstyleExpression
puede ser uno de:
- A string lista de estilos como
"width: 100px; height: 100px; background-color: cornflowerblue;"
.- Un objeto con nombres de estilo como keys y valores de estilo como los valores, como
width: '100px', height: '100px', backgroundColor: 'cornflowerblue'
.Tenga en cuenta que atar un array para
[style]
no es apoyado.Al atar
[style]
a una expresión de objeto, la identidad del objeto debe cambiar para que Angular actualice la lista de clases. Actualizar la propiedad sin cambiar la identidad del objeto no tiene ningún efecto.Ejemplo de encuadernación de estilo único y múltiple
@Component( selector:'app-nav-bar', template:` `)exportclassNavBarComponent navStyle ='font-size: 1.2rem; color: cornflowerblue;'; linkStyle ='underline'; activeLinkStyle ='overline';/* . . . */Si hay varios enlaces al mismo estilo attribute, Angular usa la precedencia de estilo para determinar qué enlace usar.
La siguiente tabla resume la sintaxis de enlace de estilo.
Tipo de encuadernación Sintaxis Tipo de entrada Valores de entrada de ejemplo Encuadernación de estilo único [style.width]="width"
string | undefined | null
"100px"
Encuadernación de un solo estilo con unidades [style.width.px]="width"
number | undefined | null
100
Encuadernación de varios estilos [style]="styleExpression"
string
"width: 100px; height: 100px"
Record
width: '100px', height: '100px'
La directiva NgStyle se puede utilizar como alternativa a direct
[style]
fijaciones. Sin embargo, utilizando la sintaxis de enlace de estilo anterior sinNgStyle
se prefiere porque debido a las mejoras en el enlace de estilo en Angular,NgStyle
ya no proporciona un valor significativo y, eventualmente, podría eliminarse en el futuro.Precedencia de estilo
Un solo elemento HTML puede tener su lista de clases CSS y valores de estilo vinculados a múltiples fuentes (por ejemplo, enlaces de host de múltiples directivas).
Cuando hay varios enlaces al mismo nombre de clase o propiedad de estilo, Angular usa un conjunto de reglas de precedencia para resolver conflictos y determinar qué clases o estilos se aplican en última instancia al elemento.
Prioridad de estilo (de mayor a menor)
- Enlaces de plantilla
- Vinculación de propiedad (por ejemplo,
o
)- Enlace de mapa (por ejemplo,
o
style]="styleExpr">)- Valor estático (por ejemplo,
o
style="color: blue">)- Enlaces de host de directivas
- Enlaces de host de componentes
Cuanto más específico sea un enlace de clase o estilo, mayor será su precedencia.
Un enlace a una clase específica (por ejemplo,
[class.foo]
) tendrá prioridad sobre un genérico[class]
encuadernación, y una encuadernación a un estilo específico (por ejemplo,[style.bar]
) tendrá prioridad sobre un genérico[style]
vinculante.<h3>Basic specificityh3><div[class.special]="isSpecial"[class]="classExpression">Some text.div><div[style.color]="color"[style]="styleExpression">Some text.div>Las reglas de especificidad también se aplican cuando se trata de enlaces que se originan en diferentes fuentes. Es posible que un elemento tenga enlaces en la plantilla donde se declara, desde enlaces de host en directivas coincidentes y desde enlaces de host en componentes coincidentes.
Los enlaces de plantilla son los más específicos porque se aplican al elemento directa y exclusivamente, por lo que tienen la mayor prioridad.
Los enlaces de host de directiva se consideran menos específicos porque las directivas se pueden usar en varias ubicaciones, por lo que tienen una precedencia menor que los enlaces de plantilla.
Las directivas a menudo aumentan el comportamiento de los componentes, por lo que los enlaces de host de los componentes tienen la precedencia más baja.
<h3>Source specificityh3><comp-with-host-binding[class.special]="isSpecial"dirWithClassBinding>Some text.comp-with-host-binding><comp-with-host-binding[style.color]="color"dirWithStyleBinding>Some text.comp-with-host-binding>Además, las vinculaciones tienen prioridad sobre static attributes.
En el siguiente caso,
class
y[class]
tienen una especificidad similar, pero el[class]
la vinculación tendrá prioridad porque es dinámica.<h3>Dynamic vs statich3><divclass="special"[class]="classExpression">Some text.div><divstyle="color: blue"[style]="styleExpression">Some text.div>Delegar en estilos con menor precedencia
Es posible que los estilos de mayor precedencia “deleguen” en estilos de menor precedencia usando
undefined
valores. Mientras que establecer una propiedad de estilo ennull
asegura que se elimine el estilo, configurándolo enundefined
hará que Angular retroceda al siguiente enlace de precedencia más alto para ese estilo.Por ejemplo, considere la siguiente plantilla:
<comp-with-host-bindingdirWithHostBinding>comp-with-host-binding>Imagina que el
dirWithHostBinding
directiva y lacomp-with-host-binding
ambos tienen un componente[style.width]
unión del anfitrión. En ese caso, sidirWithHostBinding
establece su enlace aundefined
, loswidth
la propiedad volverá al valor de lacomp-with-host-binding
unión del anfitrión. Sin embargo, sidirWithHostBinding
establece su enlace anull
, loswidth
La propiedad se eliminará por completo.Inyectando attribute valores
Hay casos en los que es necesario diferenciar el comportamiento de un componente o directiva en función de un static valor establecido en el elemento host como HTML attribute. Por ejemplo, es posible que tenga una directiva que necesite conocer el
type
de uno
elemento.
El decorador de parámetros de atributo es ideal para pasar el valor de un HTML attribute a un constructor de componente / directiva a través de la inyección de dependencia.
El valor inyectado captura el valor del HTML especificado attribute en ese momento. Futuras actualizaciones del attribute El valor no se refleja en el valor inyectado.
import Attribute, Component from'@angular/core';@Component( selector:'app-my-input-with-attribute-decorator', template:'The type of the input is: type ')exportclassMyInputWithAttributeDecoratorComponentconstructor(@Attribute('type')public type:string)<app-my-input-with-attribute-decoratortype="number">app-my-input-with-attribute-decorator>En el ejemplo anterior, el resultado de
app.component.html
es El tipo de entrada es: número.Otro ejemplo es la directiva RouterOutlet, que hace uso del decorador de atributos para recuperar el nombre único en cada salida.
@Attribute () frente a @Input () Recuerda, usa @Input () cuando desee realizar un seguimiento de la attribute valor y actualice la propiedad asociada. Use @Attribute () cuando desee inyectar el valor de un HTML attribute a un componente o constructor de directivas.
Te mostramos reseñas y puntuaciones
Recuerda algo, que tienes el privilegio reseñar si te ayudó.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)Utiliza Nuestro Buscador