La vinculación de datos en una dirección unidireccional vinculará los datos del componente a la vista (DOM) o de la vista al componente. El enlace de datos unidireccional es unidireccional. Sólo puede vincular los datos del componente a la vista o de la vista al componente.
Del componente a la vista
Existen diferentes técnicas de vinculación de datos que utilizan la vinculación de datos en una dirección para vincular los datos de un componente a otro. A continuación se presentan algunas de las técnicas que utilizan la vinculación de datos en una sola dirección.
- Encuadernación por interpolación: La interpolación se refiere a la vinculación de expresiones en un lenguaje marcado.
- Vinculación de la propiedad: La vinculación de propiedad se utiliza para establecer una propiedad de un elemento de vista. La vinculación establece la propiedad al valor de una expresión de plantilla.
- Attribute Binding: La vinculación de atributos se utiliza para establecer una propiedad de atributo de un elemento de visualización.
- La clase de la encuadernación: La vinculación de clase se utiliza para establecer una propiedad de clase de un elemento de vista.
- Encuadernación de estilo: La encuadernación de estilo se utiliza para establecer un estilo de un elemento de vista.
Consideremos un ejemplo usando la técnica de interpolación donde estamos vinculando dos valores, nombre y apellido, a la vista, encerrados en dobles llaves rizadas: {{{nombre de la propiedad}}.
En este ejemplo, la vinculación de los datos se hace desde el componente hasta la vista. Cualquier cambio en los valores del componente se reflejará en la vista y no al revés.
Nombre del archivo: app.component.ts
123456789101112131415importar{Componente}de"@angular/núcleo";@Componente({ selector:$0027app-example$0027, plantilla: ```Div.; ``Fuerte{{{{{nombre}}}</fuerte{{{i}; fuerte{{i} {{{apellido}}}</fuerte{i}; `})exportclaseAppComponente{{{i1}nombre:string="Yallaling"; apellido_string="Goudar";}tipografía
Consideremos otro ejemplo que utiliza la vinculación de la propiedad. En este ejemplo, estamos vinculando un valor, firstName, a la propiedad innerHTML de la etiqueta span. Vinculará el valor de firstName al elemento span.
123456789101112importación{Componente}de"@angular/núcleo";@Componente({ selector:$0027app-example$0027, template:` <div> <span [innerHTML]=$0027firstName$0027</span> </div> `})exportclaseAppComponente{ firstName_string="Yallaling";}tipografía
Consideremos un ejemplo más de encuadernación de estilo. En este ejemplo, estamos vinculando un estilo de color al elemento «h1». Mostrará el texto dentro de las etiquetas h1 en un color azul.
1<h1[style.color]="blue"=Este es un Heading Blue</h1;
html
De la vista al componente
La vinculación de datos unidireccionales de la vista al componente puede lograrse utilizando la técnica de vinculación de eventos.
Consideremos un ejemplo en el que entre paréntesis a la izquierda del signo igual tenemos el evento objetivo como «clic» y a la derecha podemos tener las declaraciones de la plantilla como las propiedades del componente y los métodos(myFunction() en este caso) se unen al evento.
1<button(click)="myFunction()"``Mostrar alerta</botón&;
html
En el código anterior, el método myFunction() del componente será llamado cuando el usuario haga clic en el botón.
Nombre de archivo app.component.ts
12345678910importar{Componente}de"@angular/núcleo"; @Componente({ selector:$0027app-example$0027, plantilla:`<botón (click)=$0027myFunction()$0027;Show alert</button>`})exportclassAppComponente{myFunction():void{alert($0027Show alert!$0027);}}tipografía
Una vez que ejecute el código anterior, verá un botón con el texto «Mostrar alerta». Al hacer clic en ese botón, llamará al método myFunction() del componente, que a su vez ejecutará el método alert(), mostrando un cuadro de alerta con el texto «Mostrar una alerta».