迹忆客 专注技术分享

本篇文章将讨论在 Angular 2 中实现双向数据绑定。

Angular 中的双向数据绑定

双向数据绑定是 Angular 最强大的功能之一。它允许数据从组件流向视图，反之亦然。

它向用户提供信息，并使他们能够通过用户界面更改基础数据。

数据绑定通过跟踪 UI 的哪些部分依赖于哪些数据并在数据更改时更新来帮助我们管理我们的应用程序状态。

单向绑定和双向绑定之间的关键区别在于，使用双向绑定，在任一方向上所做的任何更改都将自动传播到另一侧，而无需我们的任何干预。

Angular 2 默认不使用双向数据绑定。它根据定义使用单向数据绑定，但如有必要，它为双向数据绑定提供了简单的语法。

为了模拟 Angular 2 中的双向绑定，我们需要使用 ngModel 指令和 ngModelChange 事件。

ngModel 指令将组件模板中的属性绑定到其类中的属性。每次绑定属性的值发生变化时，都会触发 ngModelChange 事件。

在 Angular 2 中实现双向数据绑定

ngModel 是 Angular 2 中的双向数据绑定指令，这意味着它会在发生更改时同时更新视图和模型。我们可以在每个绑定端设置一个事件处理程序。

因此，只要用户在用户界面上对其进行修改，相应的属性值就会自动更新。

ngModel 可以用作 HTML 标签上的属性或类。

让我们讨论一个在 Angular 2 中使用 ngModel 进行双向数据绑定的示例。

TypeScript 代码：

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
            <h3>{{ name }}</h3>
            <input [(ngModel)]="address" />
            `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Muhammad Adil';
    address = "block no 1 sector G11, Sydney";
    onKeyUp() {
        console.log(this.address);
    }
}