迹忆客 专注技术分享

Angular 事件绑定是响应任何 DOM 事件的好方法。它们允许我们将代码与元素的原生点击或输入事件绑定，并在它们发生时执行。

OnChanges 可用于监视 Angular 项目中输入参数的变化，我们可以将 Angular 2 中的 OnChanges 等效用于输入字段、按钮单击、列表项，甚至本文将讨论的滚动事件.

Angular 2 中的 OnChange 属性

Angular 2.0 有双向数据绑定。对输入字段的任何更改都将立即反映在 UI 上，反之亦然。

Onchange 是 Angular 2 中输入元素的一个属性，它指定当用户输入它或从下拉列表中选择一个值时应该发生什么。

语法：

ngOnChanges(changes: SimpleChanges)

参数 SimpleChanges 被传递给方法 ngOnChanges()，该方法在修改后返回新的和以前的输入值。

当使用输入用户对象数据类型时，ngOnChanges() 仅在父组件中对象的链接更改时调用。

如果我们仅仅改变输入用户对象的属性值，ngOnChanges() 方法将不会执行。

Angular 2 中的 OnChange 等价物

OnChanges 事件是一个生命周期钩子，当输入值更改时执行。ngModel 指令将输入或 textarea 元素绑定到当前范围内的属性，并替换了 Angular 2 支持的 HTML5 onchange 事件。

ngModelChange 事件在模型更新并且其值更改时触发。它可以通过将表达式传递给 ngModel 指令或将其绑定到输入来触发。

示例代码 - HTML：

<div>
  <input [value]="first" (change)="changeFn($event)">
  <p>{{ first }}</p>
  <input [ngModel]="second" (ngModelChange)="modelChangeFn($event)">
  <p>{{ second }}</p>
</div>

示例代码 - TypeScript：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  first = '1';
  second = '2';
  changeFn(abc) {
    this.first = abc.target.value;
  }
  modelChangeFn(abc: string) {
    this.second = abc;
  }
}

输出：

changeFn() 只会在用户模糊输入时执行。另一方面，当用户输入、粘贴或编辑输入值时，ModelChangeFn() 会监听事件并设置对象。