Angular 2+ 中的一次性数据绑定

1. 组件到视图
2. 在 Angular 2+ 中使用一次性数据绑定的步骤

在 Angular 2+ 中，一次性数据绑定仅在模型或任何输入属性发生更改时更新视图。这种类型的数据绑定减少了对视图的不必要更新，从而为你的计算机带来更好的性能和更少的工作。

单向数据绑定的单向性是显而易见的。你只能将数据从一个组件或视图链接到另一个。

组件到视图

几种数据绑定策略采用单向数据绑定将数据从组件连接到视图。

属性绑定

此技术允许你将 HTML 元素的属性绑定到模型中的对象属性。它需要更改组件的属性值并将该值包装到同一视图中的 HTML 元素。

对于成员之间的切换功能和数据交换，我们使用属性绑定。

属性绑定

使用这种技术，我们可以将 HTML 元素的属性绑定到模型中的对象属性，并指定发生更改时更新哪个属性值。

类绑定

这种技术将 DOM 元素绑定到 AngularJS 类，并允许使用模型中的数据更新它们。

插值绑定

插值方法允许用户将值附加到用户界面元素。插值以单向过程绑定数据，因此数据仅以一种方式从组件流向 HTML 元素。

在 Angular 2+ 中使用一次性数据绑定的步骤

本节将向你展示如何在 Angular 2+ 中使用单向数据绑定。

示例（TypeScript）：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

示例（HTML）：

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

点击这里查看上述代码的演示。