Angular 中的单向和双向数据绑定
介绍
单向和双向数据绑定是我们从组件到 DOM 交换数据以及从 DOM 交换数据的重要方式。组件和视图之间的数据交换将帮助我们构建动态且交互式的 Web 应用程序。
单向数据绑定
单向数据绑定会将数据从组件绑定到视图（DOM）或从视图绑定到组件。单向数据绑定是单向的。您只能将数据从组件绑定到视图或从视图绑定到组件。
从组件到视图
数据绑定有多种技术，它们使用单向数据绑定将数据从组件绑定到视图。以下是一些使用单向数据绑定的技术。
- 插值绑定：插值是指将表达式绑定到标记语言中。
- 属性绑定：属性绑定用于设置视图元素的属性。绑定将属性设置为模板表达式的值。
- 属性绑定：属性绑定用于设置视图元素的属性特性。
- 类绑定：类绑定用于设置视图元素的类属性。
- 样式绑定：样式绑定用于设置视图元素的样式。
让我们考虑一个使用插值技术的例子，其中我们将两个值 firstName 和 lastName 绑定到视图，并用双花括号括起来：{ {property Name}}。
在此示例中，数据绑定是从组件到视图完成的。组件中值的任何更改都将反映在视图中，反之亦然。
文件名：app.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<strong>{{firstName}}</strong>
<strong>{{lastName}}</strong>
</div>
`
})
export class AppComponent {
firstName: string = "Yallaling";
lastName:string = "Goudar";
}
让我们考虑另一个使用属性绑定的示例。在此示例中，我们将一个值 firstName 绑定到 span 标签的 innerHTML 属性。它将 firstName 的值绑定到 span 元素。
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<span [innerHTML]='firstName'></span>
</div>
`
})
export class AppComponent {
firstName: string = "Yallaling";
}
让我们再考虑一个样式绑定的例子。在这个例子中，我们将颜色样式绑定到“h1”元素。它将以蓝色显示 h1 标签内的文本。
<h1 [style.color]="blue">This is a Blue Heading</h1>
从视图到组件
可以使用事件绑定技术实现从视图到组件的单向数据绑定。
让我们考虑一个例子，在等号左边的括号内我们有目标事件，如“点击”，而在右边我们可能有绑定到该事件的模板语句，如组件属性和方法（在本例中为 myFunction()）。
<button (click)="myFunction()">Show alert</button>
在上面的代码中，当用户点击按钮时，组件中的 myFunction() 方法将被调用。
文件名 app.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `<button (click)='myFunction()' >Show alert</button>`
})
export class AppComponent {
myFunction(): void {
alert('Show alert!');
}
}
运行上述代码后，您将看到一个带有文本“显示警报”的按钮。单击该按钮时，它将调用组件中的 myFunction() 方法，该方法又将执行 alert() 方法，显示一个带有文本“显示警报”的警报框。
Angular 中的双向数据绑定
Angular 中的双向数据绑定将帮助用户从组件到视图以及从视图到组件交换数据。它将帮助用户建立双向通信。
可以使用 Angular 中的 ngModel 指令实现双向数据绑定。以下语法显示了使用 [(ngModel)] 进行数据绑定，它基本上是属性绑定的方括号和事件绑定的圆括号的组合。
<input type="text" [(ngModel)] = 'val' />
在使用 ngModel 实现双向数据绑定之前，从 app.module.ts 文件中的 @angular/forms 导入 FormsModule 非常重要，如下所示。FormsModule 将包含 ngModule 指令。
文件名 app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [ AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
如果您不导入 FormsModule，那么您将收到模板解析错误，并导致以下错误：
“无法绑定到‘ngModel’，因为它不是‘input’的已知属性”。
导入 FormsModule 后，您可以继续使用 [(ngModel)] 绑定数据，如下所示。
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
Enter the value : <input [(ngModel)] ='val'>
<br>
Entered value is: {{val}}
`
})
export class AppComponent {
val: string = '';
}
一旦运行上述代码，我们将看到一个输入框，要求我们在视图中输入一个值。在该输入框中输入的任何值都将与下面的文本绑定。假设用户输入了文本“John”，则文本将是“输入的值为：John”。
结论
在本指南中，我们看到了在 Angular 中绑定数据的两种重要方法以及如何使用不同的技术实现它们。
希望本指南对您有所帮助。如果您想了解有关 Angular 的更多概念，请查看我之前的指南：[Angular 数据绑定概述] (/guides/angular-data-binding-overview)。
了解更多
探索 Pluralsight 的这些 Angular 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~