Einmalige Datenbindung in Angular 2+

1. die Komponente zur Ansicht
2. Schritte zur Verwendung der einmaligen Datenbindung in Angular 2+

In Angular 2+ aktualisiert die einmalige Datenbindung die Ansicht nur, wenn sich das Modell oder Eingabeeigenschaften ändern. Diese Art der Datenbindung reduziert unnötige Aktualisierungen der Ansicht, was zu einer besseren Leistung und weniger Arbeit für Ihren Computer führt.

Die unidirektionale Natur der unidirektionalen Datenbindung ist offensichtlich. Sie können nur Daten von einer Komponente oder Ansicht mit einer anderen verknüpfen.

die Komponente zur Ansicht

Mehrere Datenbindungsstrategien verwenden unidirektionale Datenbindung, um Daten von einer Komponente mit einer Ansicht zu verbinden.

Eigentumsbindung

Mit dieser Technik können Sie die Eigenschaft eines HTML-Elements an eine Objekteigenschaft im Modell binden. Dazu muss der Eigenschaftswert einer Komponente geändert und dieser Wert in ein HTML-Element in derselben Ansicht eingebunden werden.

Für die Toggle-Funktionalität und den Datenaustausch zwischen Mitgliedern verwenden wir Property Binding.

Attributbindung

Mit dieser Technik können wir das Attribut eines HTML-Elements an eine Objekteigenschaft im Modell binden und angeben, welcher Attributwert aktualisiert wird, wenn eine Änderung auftritt.

Klassenbindung

Diese Technik bindet DOM-Elemente an AngularJS-Klassen und ermöglicht deren Aktualisierung mit Daten aus dem Modell.

Interpolationsbindung

Das Interpolationsverfahren ermöglicht es dem Benutzer, einem Benutzerschnittstellenelement einen Wert zuzuordnen. Die Interpolation bindet Daten in einem unidirektionalen Prozess, sodass Daten auf nur eine Weise von Komponenten zu HTML-Elementen fließen.

Schritte zur Verwendung der einmaligen Datenbindung in Angular 2+

Dieser Abschnitt zeigt Ihnen, wie Sie die unidirektionale Datenbindung in Angular 2+ verwenden.

Beispiel (TypeScript):

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

Beispiel (HTML):

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

Klicken Sie hier, um die Live-Demonstration des Codes wie oben erwähnt zu überprüfen.