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

在这篇文章中，我们将学习Angular中数据绑定的概念。我们还将探索它的类型，并研究Angular中单向绑定和双向绑定的区别。

数据绑定是一种在模型和视图组件之间自动同步数据的方式。 AngularJS实现了数据绑定，它将模型视为你的应用程序中的单一真理来源，并且在任何时候，视图都是模型的投影。 与React不同，Angular支持双向绑定。通过这种方式，我们可以使代码更加松散地耦合。数据绑定可以分为两种类型，即单向绑定和双向绑定。

单向绑定：

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

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";
}

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

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’导入’FormsModule’。
• 对视图的任何改变都会传播到组件类。同时，对组件类中属性的任何改变也会反映在视图中。
• 为了双向绑定两个属性，声明ngModel指令并将其设置为等于属性的名称。
• 我们将通过一个例子来理解这个概念，以便让它更容易被理解。

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

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

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

输出:

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