Diferencia entre enlace unidireccional y enlace bidireccional

En este artículo, aprenderemos el concepto de enlace de datos en Angular. También exploraremos sus tipos y examinaremos las diferencias entre el enlace unidireccional y el enlace bidireccional en angular. 

El enlace de datos es una forma de sincronizar automáticamente. A diferencia de React, angular admite enlaces bidireccionales. De esta manera, podemos hacer que el código se acople más libremente. El enlace de datos se puede clasificar en 2 tipos, es decir, enlace unidireccional y enlace bidireccional.

Enlace unidireccional:

  • En el enlace unidireccional, el flujo de datos es unidireccional.
  • Esto significa que el flujo de código es del archivo TypeScript al archivo Html.
  • Para lograr un enlace unidireccional, usamos el concepto de enlace de propiedad en Angular.
  • En el enlace de propiedades, encapsulamos la variable en Html con corchetes ( [ ] ).
  • Entenderemos este concepto a través de un ejemplo para hacerlo más comprensible.

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "Displaying the content with one way binding";
}

app.component.html

<h3>Displaying the content without one way binding</h3>
  
<hr />
  
<h3 [textContent]="title"></h3>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
  
import { AppComponent } from "./app.component";
  
@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Enlace bidireccional:

  • En un enlace bidireccional, el flujo de datos es bidireccional.
  • Esto significa que el flujo de código es del archivo ts al archivo Html, así como del archivo Html al archivo ts.
  • Para lograr un enlace bidireccional, usaremos ngModel o banana en una sintaxis de cuadro.
  • Para asegurarnos de que la aplicación no se rompa, debemos importar ‘FormsModule’ desde ‘@angular/forms.
  • Cualquier cambio en la vista se propaga a la clase de componente. Además, cualquier cambio en las propiedades de la clase de componente se refleja en la vista.
  • Para enlazar dos propiedades con el fin de que funcione el enlace bidireccional, declare la directiva ngModel y configúrela igual al nombre de la propiedad.
  • Entenderemos el concepto a través de un ejemplo para hacerlo más comprensible.

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  data = "Ram and Syam";
}

app.component.html

<input [(ngModel)]="data"  type="text">
  
<hr>
  
<h3> Entered data is  {{data}}</h3>

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
  
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Diferencia entre encuadernación unidireccional y bidireccional

Unión unidireccional 

Encuadernación bidireccional 

En el enlace unidireccional, el flujo es unidireccional.

En un enlace bidireccional, el flujo es bidireccional.

Esto significa que el flujo de código es del archivo ts al archivo Html.

Esto significa que el flujo de código es del archivo ts al archivo Html, así como del archivo Html al archivo ts.

Para lograr el enlace unidireccional, usamos el concepto de enlace de propiedad en Angular.

Para lograr un enlace bidireccional, usaremos ngModel o banana en una sintaxis de cuadro.

En el enlace de propiedades, encapsulamos la variable en html con corchetes ( [ ] ).

Para asegurarnos de que la aplicación no se rompa, debemos importar ‘FormsModule’ desde ‘@angular/forms’. Usando ngModel , vincularemos una variable de Html a un archivo ts y de un archivo ts a un archivo Html.

Publicación traducida automáticamente

Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *