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}}
点击这里查看上述代码的演示。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook