OnChange-Äquivalent in Angular 2

Muhammad Adil 15 Februar 2024
  1. die Eigenschaft OnChange in Angular 2
  2. Entspricht OnChange in Angular 2
OnChange-Äquivalent 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:

onchange Äquivalent in Angular

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.

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

Verwandter Artikel - Angular Event