Angular 8 中的数据绑定

数据绑定是 Angular 8 的核心概念，用于定义组件和 DOM 之间的通信。它是一种将数据链接到视图层面的技术。简单来说，你可以说数据绑定是组件的 TypeScript 代码和用户看到的模板之间的通信。它使您能够轻松定义交互式应用程序，而不必担心推送和提取数据。

数据绑定可以是一路数据绑定或双向数据绑定。

单向数据绑定

单向数据绑定是一种简单的单向通信，在我们在 TypeScript 代码中进行更改时，HTML 模板也会更改。

或

在单向数据绑定中，模型的值在视图（HTML 页面）中使用，但您无法从视图更新模型。 Angular 插值 / 字符串插值、属性绑定和事件绑定是单向数据绑定的示例。

双向数据绑定

在双向数据绑定中，模型和视图之间会发生数据的自动同步。 在这里，更改会反映在两个组件中。 无论何时您在模型中进行更改，它都会反映在视图中；当您在视图中进行更改时，它都会反映在模型中。

这种情况会立即自动发生，确保 HTML 模板和 TypeScript 代码始终保持更新。

Angular 提供了四种数据绑定方式，它们在数据流向方面有所不同。

• 字符串插值
• 属性绑定
• 事件绑定
• 双向绑定

字符串插值

字符串插值是一种单向数据绑定技术，用于将数据从 TypeScript 代码输出到 HTML 模板（视图）。它在双大括号中使用模板表达式，以将组件中的数据呈现到视图。

例如

{{ 数据 }}

字符串插值添加来自组件的属性的值

语法

了解有关字符串插值的更多信息：点击这里

属性绑定

属性绑定也是一种单向数据绑定技术。在属性绑定中，我们将 DOM 元素的属性绑定到我们组件 TypeScript 代码中定义的字段。

例如

<img [src]="imgUrl"/>

语法

了解有关属性绑定的更多信息：点击这里

事件绑定

在 Angular 8 中，事件绑定用于处理从 DOM 引发的事件，例如按钮点击、鼠标移动等。当 DOM 事件发生时（例如，单击、更改、松开键盘键），它会调用组件中指定的方法。在下面的示例中，当单击按钮时，将调用组件中的 cookBacon() 方法

例如

了解有关事件绑定的更多信息：点击这里

双向数据绑定

我们已经看到，在单向数据绑定中，模板（视图）中的任何更改都不会反映在组件 TypeScript 代码中。为了解决这个问题，Angular 提供了双向数据绑定。双向绑定具有从组件到视图更新数据的功能，反之亦然。

在双向数据绑定中，属性绑定和事件绑定结合在一起。

语法

注意：对于双向数据绑定，我们必须启用 ngModel 指令。它依赖于 angular/forms 包中的 FormsModule，因此我们必须在 AppModule 中的 imports[] 数组中添加 FormsModule。

了解有关双向数据绑定的更多信息：点击这里