单向绑定和双向绑定的区别

在本文中，我们将学习 Angular 中数据绑定的概念。我们还将探索它的类型并检查单向绑定和双向绑定在角度方面的区别。

数据绑定是一种在模型和视图组件之间自动同步数据的方法。 AngularJS 实现了数据绑定，将模型视为应用程序中的唯一真实来源，并且视图始终是模型的投影。与 React 不同，Angular 支持双向绑定。这样，我们可以让代码更松耦合。数据绑定可以分为两种类型，即单向绑定和双向绑定。

一种方式绑定：

• 在单向绑定中，数据流是单向的。
• 这意味着代码流是从 typescript 文件到 Html 文件。
• 为了实现单向绑定，我们使用了 Angular 中的属性绑定概念。
• 在属性绑定中，我们用方括号（ [ ] ）将变量封装在 Html 中。
• 我们将通过一个例子来理解这个概念，以使其更易于理解。

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

Displaying the content without one way binding
  

  

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 {}

输出：

双向绑定：

• 在双向绑定中，数据流是双向的。
• 这意味着代码的流动是从 ts 文件到 Html 文件以及从 Html 文件到 ts 文件。
• 为了实现双向绑定，我们将使用 ngModel 或banana in a box 语法。
• 为了确保应用程序不会中断，我们需要从“@angular/forms.xml”导入“FormsModule”。
• 对视图的任何更改都会传播到组件类。此外，对组件类中属性的任何更改都会反映在视图中。
• 要绑定两个属性以进行双向绑定，请声明 ngModel 指令并将其设置为等于属性的名称。
• 我们将通过一个例子来理解这个概念，以使其更易于理解。

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

  

  
 Entered data is  {{data}}

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 {}

输出：

单向绑定和双向绑定的区别

One-way binding	Two-way binding
In one-way binding, the flow is one-directional.	In a two-way binding, the flow is two-directional.
This means that the flow of code is from ts file to  Html file.	This means that the flow of code is from ts file to Html file as well as from Html file to ts file.
In order to achieve one-way binding, we used the property binding concept in Angular.	In order to achieve a two-way binding, we will use ngModel or banana in a box syntax.
In property binding, we encapsulate the  variable in html with square brackets( [ ] ).	To make sure the app doesn’t break, we need to import ‘FormsModule’ from ‘@angular/forms’. Using ngModel, we will bind a variable from Html to ts file and from ts file to Html file.