Saltar al contenido
Consejos

Entendiendo el flujo de datos unidireccional

Para implementar la unión de datos unidireccional i Angular, tenemos muchas opciones:

  • Vinculación de la propiedad
  • Vinculación de clases
  • Encuadernación de estilo
  • Vinculación de atributos
  • Interpolación

Estos son todos los tipos de unión de datos unidireccionales, y usando tales tipos, podemos implementar un flujo de datos unidireccional desde nuestro componente hasta la vista.

Entendiendo el flujo de datos unidireccional
Entendiendo el flujo de datos unidireccional

Veamos un ejemplo de cada tipo de unión unidireccional.

Vinculación de la propiedad

Esta es la forma más sencilla de vincular las propiedades del componente o los valores modales al elemento HTML diferente de la vista.

Aquí en este tipo, la propiedad del elemento HTML será usada para la unión, y podemos usar corchetes [ ] alrededor de la propiedad, así: [propiedad].

Entendamos la vinculación de la propiedad con un ejemplo.

12345678910111213141516171819importación{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027mi-app$0027, plantilla: ``Tabla{[innerHtml]="propValue"}; ``Tabla{[tr]}; ``Tabla{[tr]}; ``Tabla{[td]}; ``, estiloUrls:[$0027. /app.component.css$0027]})exportclassAppComponent{ propValue =$0027Angular Two-way data binding$0027;}

tipografía

Aquí en este ejemplo, hemos utilizado el elemento label, y junto con el elemento hemos utilizado una propiedad llamada innerHtml.Nótese que hemos utilizado [] junto con la propiedad name, que define que hemos utilizado la propiedad binding que acepta el valor modal o componente del componente y lo renderiza.

Así es como podemos utilizar la vinculación de propiedad para utilizar el valor del componente en la vista.

Clase Binding

La vinculación de clase se utiliza para añadir o eliminar diferentes nombres de clase de un elemento HTML en función del valor procedente del modal o la propiedad del componente.

Para aplicar la vinculación de clases, hay un prefijo llamado clase. Por ejemplo, si queremos aplicar el nombre de clase mytext, entonces podemos aplicar la vinculación de clase, como se explica a continuación.

Veamos un ejemplo simple usando el mecanismo de unión de clases.

1234567891011121314151617181920importación{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027mi-app$0027, plantilla:`<tabla mylabel]="isLabel" [innerHtml]="propValue"³;</label;³;/td;³;³;/tr;³;/tabla;³; `, styleUrls:[$0027./app.component.css$0027]})exportclassAppComponent{ propValue =$0027Angular Two-way data binding$0027; isLabel_boolean=true;}

tipografía

Y la hoja de estilo se puede definir en el archivo diferente, así:

123.mylabel{tamaño de fuente:25px}

css

En el código anterior, el fragmento es sólo una simple hoja de estilo CSS que contiene una sola clase, myLabel, que hemos utilizado para enlazar la clase.

Así es como se utiliza la vinculación de clases, y utilizando este enfoque podemos añadir o eliminar diferentes clases condicionalmente.

Encuadernación de estilo

Ya hemos visto cómo aplicar la vinculación de clases. A veces podemos necesitar unir los estilos para estar en línea directamente con el elemento HTML.

Para aplicar los estilos en línea mediante la encuadernación de estilo, debemos utilizar el estilo de prefijo seguido del operador de puntos (.) y el nombre del estilo.

Pasemos al simple ejemplo que demuestra el uso de la encuadernación de estilo.

12345678910111213141516171819importación{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027mi-app$0027, plantilla:` ``tabla$0027; <tr font-size]="45" [innerHtml]="propValue"³;</h3;³; </td;³; </tr;/tabla; `, styleUrls:[$0027./app.component.css$0027]})exportclassAppComponent{ propValue =$0027Angular Two-way data binding$0027;}

tipografía

Aquí en el fragmento de código anterior, tenemos un elemento llamado h3, y junto con el elemento, necesitamos aplicar una propiedad de tamaño de fuente. Entonces podemos hacer uso de la vinculación de estilo.

En el ejemplo, hemos utilizado [style.font-size] junto con el valor específico, de modo que el estilo se aplicará a ese elemento y se renderizará en el DOM.

Vinculación de atributos

La vinculación de atributos se utiliza para vincular las diferentes propiedades de los atributos al elemento de la vista. Se utiliza para vincular los diferentes atributos condicionalmente cuando tenemos propiedades de componentes/modales basadas en el requisito empresarial del componente a la vista.

Para aplicar la vinculación de atributos, necesitamos usar el prefijo attr seguido del operador de puntos (.) y el nombre del atributo.

Ahora vamos a saltar al ejemplo para entender cómo funciona la unión de atributos.

12345678910111213141516171819importación{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027mi-app$0027, plantilla:`<tabla align]="right" [innerHtml]="propValue"³;</h3;³; </td;³; </tr;/tabla; `, styleUrls:[$0027./app.component.css$0027]})exportclassAppComponent{ propValue =$0027Angular Two-way data binding$0027;}

tipografía

Como pueden ver en el ejemplo, tenemos el elemento

. Si queremos aplicar la alineación de atributos, podemos rodearla con la unión como [attr.align] seguida del valor apropiado.

Así es como podemos aplicar varios atributos soportados al elemento utilizando el mecanismo de unión de atributos.

Interpolación

La interpolación es un mecanismo vinculante de uso común que también se denomina «vinculante de datos unidireccional».

Por lo general, la interpolación se utiliza para vincular la propiedad del componente unidireccional a la vista y no al revés.

Para usar la interpolación, necesitamos encerrar la propiedad de nuestro componente con llaves rizadas {{ }}, y el valor se renderizará en el DOM.

Saltemos al ejemplo y veamos cómo funciona la interpolación.

123456789101112131415importación{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027my-app$0027, plantilla:` <span> {{ propValue }} </span> `, estiloUrls:[$0027./app.component.css$0027]})clase de exportaciónAppComponente{ propValue =$0027Angular de datos bidireccionales$0027;}

tipografía

Aquí en este ejemplo, tenemos una propiedad de componente llamada propValue, y en la vista, tenemos el elemento span y usamos {{ }} paréntesis para representar el valor dentro del span.

La interpolación siempre será una forma de vinculación de datos unidireccionales para vincular el valor de las propiedades de los componentes a la vista.