Detaillierte Erläuterung der Angular-Datenbindung und ihrer Implementierung

Vorwort

Die Webentwicklung erfordert eine Datensynchronisierung zwischen Modellen und Ansichten. Diese Modelle enthalten im Wesentlichen die Datenwerte, während die Ansichten verwalten, was der Benutzer sieht. Wenn Sie sich also fragen, wie dies in Angular geschieht, hilft Ihnen dieser Artikel zur Angular-Datenbindung.

Nachfolgend sind die hier besprochenen Themen aufgeführt:

• Was ist Datenbindung?
• Arten der Datenbindung in Angular
• Einweg-Datenbindung Interpolationseigenschaftsbindung Ereignisbindung
• Zweiseitige Datenbindung

Was ist Datenbindung?

Datenbindung ist der Mechanismus, mit dem Ihre Anwendungs-UI oder Benutzeroberfläche an ein Modell gebunden wird. Durch die Datenbindung können Benutzer die auf der Website vorhandenen Elemente mit ihrem Browser bearbeiten. Wenn also eine Variable geändert wird, muss sich diese bestimmte Änderung im Document Object Model oder DOM widerspiegeln.

In Angular definiert die Datenbindung die Interaktion zwischen Komponenten und dem DOM. Die Datenbindung ist Teil aller Angular-Versionen, angefangen bei AngularJS bis hin zur neuesten Angular 9-Version.

Arten der Datenbindung in Angular

Angular ermöglicht sowohl eine unidirektionale als auch eine bidirektionale Datenbindung. Die unidirektionale Datenbindung ist eine einfache Art der Datenbindung, bei der Sie die Ansicht durch das Modell manipulieren. Dies bedeutet, dass am Typescript-Code vorgenommene Änderungen im entsprechenden HTML widergespiegelt werden. In Angular wird die unidirektionale Datenbindung folgendermaßen erreicht:

• Interpolation oder String-Interpolation
• Eigenschaftsbindung
• Ereignisbindung

Die bidirektionale Datenbindung hingegen ermöglicht die Synchronisierung von Daten auf eine Weise, dass das Modell zum Aktualisieren der Ansicht und die Ansicht zum Aktualisieren des Modells verwendet werden kann. Dies bedeutet, dass Ihre Anwendung Informationen zwischen Komponentenklassen und ihren Vorlagen austauschen kann.

Einweg-Datenbindung

Bei der unidirektionalen Datenbindung fließen die Daten nur in eine Richtung, nämlich vom Modell zur Ansicht. Wie bereits erwähnt, gibt es in Angular drei Arten der unidirektionalen Datenbindung: Interpolation, Eigenschaftsbindung und Ereignisbindung.

Interpolationsbindung

Die Interpolationsbindung wird verwendet, um HTML-Ausgaben aus TypeScript-Code zurückzugeben (d. h. von Komponenten zu Ansichten). Hier wird der Vorlagenausdruck in doppelten geschweiften Klammern angegeben. Durch Interpolation können Sie dem Text zwischen HTML-Element-Tags und innerhalb von Attributzuweisungen Zeichenfolgen hinzufügen. Diese Zeichenfolgen werden mithilfe von Vorlagenausdrücken ausgewertet.

Beispiel:

<h1>{{title}}</h1>
 
Lernen Sie <b>{{Kurs}}
</b> mit Edureka.
 
2 * 2 = {{2 * 2}}
 
<div><img src="{{image}}"></div>

Der Typescript-Teil dieses Codes lautet wie folgt:

exportiere Klasse AppComponent {
  Titel = 'Datenbindung';
  Kurs = "Angular";
  Bild = „Fügen Sie hier die URL ein“
}

Ausgabe:

Die Komponentenattribute werden zwischen zwei geschweiften Klammern angegeben. Angular ersetzt die Komponenteneigenschaft durch den Zeichenfolgenwert, der dieser Komponenteneigenschaft zugeordnet ist. Es kann je nach Bedarf an unterschiedlichen Orten eingesetzt werden. Angular wandelt Interpolation in Eigenschaftsbindung um.

Angular ermöglicht Ihnen auch, das Interpolationstrennzeichen zu konfigurieren und die beiden geschweiften Klammern durch etwas Ihrer Wahl zu ersetzen. Dies kann mithilfe der Interpolationsoption in den Komponentenmetadaten erfolgen.

Vorlagenausdrücke

Vorlagenausdrücke werden in zwei geschweifte Klammern eingeschlossen und erzeugen einen Wert. Angular wertet den Ausdruck aus und weist den spezifischen Ausdruck dann einer Eigenschaft des Bindungsziels zu, beispielsweise einem HTML-Element, einer Komponente oder einer Direktive.

Hinweis: Die 2*2 zwischen den Interpolationsklammern ist ein Schablonenausdruck.

Eigenschaftenbindung

Beim Property Binding fließen Werte von einer Komponente in eine Eigenschaft eines Zielelements. Daher kann die Eigenschaftenbindung nicht verwendet werden, um Daten aus dem Zielelement zu lesen oder zu extrahieren oder um Methoden aufzurufen, die zum Zielelement gehören. Von Elementen ausgelöste Ereignisse können durch die Ereignisbindung identifiziert werden, die weiter unten in diesem Artikel beschrieben wird.

Im Allgemeinen können Sie sagen, dass Sie die Eigenschaftsbindung verwenden, um einem Elementattribut einen Komponenteneigenschaftswert zuzuweisen.

Beispiel:

<h1>Eigenschaftsbindung</h1>
<div><img [src]="bild"></div>

Im obigen Beispiel ist das src-Attribut des Bildelements an die Bildeigenschaft der Komponente gebunden.

Eigenschaftsbindung und Interpolation

Wenn Sie es bemerkt haben, können Sie sehen, dass Interpolation und Eigenschaftsbindung synonym verwendet werden. Schauen Sie sich das unten angegebene Beispielpaar an:

<h2>Interpolation</h2>
 
<div><img src="{{image}}"></div>
 
<h2>Eigenschaftsbindung</h2>
 
<div><img [src]="bild"></div>

Beachten Sie, dass Sie die Attributbindung statt der Interpolation verwenden müssen, wenn Sie ein Elementattribut auf einen Datenwert setzen müssen, der kein String ist.

Ereignisbindung

Mit der Ereignisbindungsfunktion können Sie auf bestimmte Ereignisse wie Mausbewegungen, Tastendrücke, Klicks usw. achten. In Angular kann die Ereignisbindung erreicht werden, indem der Zielereignisname in normalen eckigen Klammern auf der linken Seite des Gleichheitszeichens (=) und die Vorlagenanweisung in schließenden Anführungszeichen ("") angegeben wird.

Beispiel:

<div>
  <button (click)="goBack()">Zurück</button>
</div>

Im obigen Beispiel ist „click“ der Name des Zielereignisses und „goBack()“ die Anweisung der Vorlage.

Ausgabe:

Immer wenn eine Ereignisbindung auftritt, richtet Angular einen Ereignishandler für das Zielereignis ein. Wenn dieses bestimmte Ereignis ausgelöst wird, werden die Vorlagenanweisungen vom Handler ausgeführt. Normalerweise enthält ein Empfänger eine Vorlagenanweisung, die als Reaktion auf das Ereignis eine Aktion ausführt. Die Bindung dient hier der Übermittlung von Informationen über die Veranstaltung. Zu diesen Datenwerten von Informationen gehören Ereigniszeichenfolgen, Objekte usw.

Zweiwegebindung

Angular ermöglicht eine bidirektionale Datenbindung, die es Ihrer Anwendung ermöglicht, Daten in beide Richtungen auszutauschen, d. h. von der Komponente zur Vorlage und umgekehrt. Dadurch wird sichergestellt, dass die in Ihrer Anwendung vorhandenen Modelle und Ansichten immer synchron sind. Durch die bidirektionale Datenbindung werden zwei Aufgaben ausgeführt: das Festlegen von Elementeigenschaften und das Abhören von Elementänderungsereignissen.

Die Syntax für die bidirektionale Bindung lautet – [()}. Wie Sie sehen, handelt es sich um eine Kombination aus Eigenschaftsbindungssyntax (d. h. []) und Ereignisbindungssyntax (). Laut Angular ist diese Syntax wie „Bananen in einer Kiste“.

Beispiel:

<label ><b>Name:</b>
        <input [(ngModel)]="kurs.name" Platzhalter="name"/>
</Bezeichnung>

Wenn Sie diesen Code ausführen, werden Sie sehen, dass Änderungen am Modell oder an der Ansicht Änderungen an der entsprechenden Ansicht und dem entsprechenden Modell zur Folge haben. Schauen Sie sich das Bild unten an, das den Kursnamen in der Ansicht von „Python“ in „Pytho“ ändert:

Oben finden Sie eine ausführliche Erläuterung der Angular-Datenbindung und ihrer Implementierung. Weitere Informationen zur Angular-Datenbindung und ihrer Implementierung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!