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

Muhammad Adil 2023年1月30日 2022年4月20日
  1. 组件到视图
  2. 在 Angular 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}}

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

Muhammad Adil avatar Muhammad Adil avatar

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

相关文章 - Angular Data Binding