Angular 2 中的 OnChange 等效项

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 2 中的 OnChange 属性
  2. Angular 2 中的 OnChange 等价物
Angular 2 中的 OnChange 等效项

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;
  }
}

输出:

onchange Angular

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

单击此处运行上述代码。

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 Event