OnChange-Äquivalent in Angular 2

1. die Eigenschaft OnChange in Angular 2
2. Entspricht OnChange in Angular 2

Angular Event Bindings sind eine großartige Möglichkeit, auf jedes DOM-Ereignis zu reagieren. Sie ermöglichen es uns, unseren Code an die nativen Klick- oder Eingabeereignisse des Elements zu binden und ihn auszuführen, wenn sie auftreten.

Die OnChanges können verwendet werden, um Änderungen der Eingabeparameter in einem Angular-Projekt zu überwachen, und wir können das OnChanges-Äquivalent in Angular 2 für Eingabefelder, Schaltflächenklicks, Listenelemente oder sogar Scroll-Ereignisse verwenden, die in diesem Artikel besprochen werden .

die Eigenschaft OnChange in Angular 2

Angular 2.0 hat eine bidirektionale Datenbindung. Alle Änderungen am Eingabefeld werden sofort auf der Benutzeroberfläche wiedergegeben und umgekehrt.

Onchange ist eine Eigenschaft eines Eingabeelements in Angular 2, die angibt, was passieren soll, wenn der Benutzer etwas eingibt oder einen Wert aus seiner Dropdown-Liste auswählt.

Syntax:

ngOnChanges(changes: SimpleChanges)

Das Argument SimpleChanges wird an die Methode ngOnChanges() übergeben, die nach Modifikationen die neuen und vorherigen Eingabewerte zurückliefert.

Bei Verwendung des Eingabe-Benutzerobjekt-Datentyps wird ngOnChanges() nur aufgerufen, wenn sich die Verknüpfung des Objekts in der übergeordneten Komponente ändert.

Die Methode ngOnChanges() wird nicht ausgeführt, wenn wir lediglich die Werte von Attributen eines eingegebenen Benutzerobjekts ändern.

Entspricht OnChange in Angular 2

Das Ereignis OnChanges ist ein Lebenszyklus-Hook, der ausgeführt wird, wenn sich der Wert der Eingabe ändert. Die Direktive ngModel bindet ein Eingabe- oder textarea-Element an eine Eigenschaft im aktuellen Bereich und ersetzt das HTML5-Event onchange, das in Angular 2 unterstützt wird.

Das Ereignis ngModelChange wird ausgelöst, wenn ein Modell aktualisiert wird und sich sein Wert ändert. Es kann ausgelöst werden, indem ein Ausdruck an die ngModel-Direktive übergeben oder an die Eingabe gebunden wird.

Beispielcode - HTML:

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

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

Ausgabe:

changeFn() wird nur ausgeführt, wenn der Benutzer die Eingabe verwischt. Wenn Benutzer andererseits den Wert einer Eingabe eingeben, einfügen oder bearbeiten, wartet ModelChangeFn() auf das Ereignis und setzt das Objekt.

Klicken Sie hier, um den oben genannten Code auszuführen.