Die Datenbindung kann verwirrend sein, wenn Sie mit Angular beginnen. Brechen wir es ab! Dieser Beitrag behandelt die unidirektionale Datenbindung von einer untergeordneten Komponente zu einer übergeordneten Komponente mit dem Ausgabe-Decorator und Ereignis-Emittern.
In diesem Beitrag werden wir untersuchen, wie Daten in Angular mit dem Output Decorator sicher von einer untergeordneten Komponente an eine übergeordnete Komponente übergeben werden können. Wir haben bereits gesehen, wie Daten von Eltern- an Kindkomponenten übergeben werden – lesen Sie hier mehr über Eingabe-Dekoratoren.
Bevor wir anfangen
Dieser Beitrag ist für alle Ebenen von Frontend-Entwicklern geeignet, die Angular verwenden, daher wird nicht vorausgesetzt, dass Sie mit Anfängerkonzepten und Installationsprozessen vertraut sind. Hier sind einige Voraussetzungen, die Sie haben sollten, bevor Sie mit der Verwendung von Angular 12 beginnen und die Demonstration dieses Artikels befolgen:
- VS Code für Ihre integrierte Entwicklungsumgebung
- Knotenversion 11.0 auf Ihrem Computer installiert
- Node Package Manager Version 6.7 (wird normalerweise mit der Node-Installation geliefert)
- Angular CLI Version 8.0 oder höher
- Die neueste Version von Angular (Version 12)
// run the command in a terminal
ng version
Bestätigen Sie, dass Sie Version 12 verwenden, und aktualisieren Sie auf 12, falls dies nicht der Fall ist.
Weitere nette Extras sind:
- Grundkenntnisse des Angular-Frameworks auf Anfängerniveau
Was ist der Ausgabe-Decorator?
Der Ausgabedekorator wird verwendet, um Daten von der untergeordneten Komponente nach oben an die übergeordnete Komponente im Komponentenbaum weiterzuleiten. Der Aufruf des Ausgabe-Decorators bindet die Eigenschaft an die Event-Emitter-Klasse, wie wir weiter unten sehen werden.
Weitere Lektionen auf
Datenbindung
Angular-Grundlagen:Datenbindung Teil 3 – Eigenschaftsbindung:Dies ist eine großartige Funktion, da die Bindung für jede einzelne DOM-Eigenschaft erfolgen kann, was Ihnen endlose Möglichkeiten bietet, wenn Sie Ihre Anwendung erstellen und Interaktionen berücksichtigen.
Was wir bauen
Wir werden den Kendo UI Wizard verwenden, um eine neue Angular-App in VS Code zu rüsten. Dann erstellen wir mit dieser App untergeordnete Komponenten und zeigen, wie wir Daten problemlos von der untergeordneten Komponente an die übergeordnete Komponente übergeben können.
Öffnen Sie Ihre VS Code-Anwendung und gehen Sie zur Befehlspalette (geben Sie Command ein + Shift + P auf dem Mac oder Strg + Shift + P auf dem PC), um den Kendo UI Wizard zu öffnen. Wenn Sie den Kendo UI Wizard noch nicht installiert haben, gehen Sie zur Registerkarte Erweiterungen, suchen Sie nach Kendo UI Template Wizard und installieren Sie ihn. Starten Sie die VS Code-App neu und gehen Sie dann zurück zur Befehlspalette, um den Kendo-UI-Assistenten zu öffnen.
Wählen Sie einen Projektnamen und einen Speicherort auf Ihrem Computer, an dem es gespeichert werden soll, und klicken Sie auf „Weiter“.
Wählen Sie Angular und dann Blank mit 1 Seite und klicken Sie auf „Next.“
Wählen Sie Standard-CSS als Stilauswahl und klicken Sie auf „Erstellen“. Wenn es fertig ist, klicken Sie auf „Neues Projekt öffnen“. Öffnen Sie das Terminal und laden Sie alle Node-Abhängigkeiten mit diesem Befehl herunter:
npm install
Danach können Sie die Anwendung mit diesem Befehl auf dem Entwicklungsserver ausführen:
ng serve
Die Anwendung sollte wie folgt aussehen, wenn Sie localhost:4200 in Ihrem Browser aufrufen.
Wenn Sie sich die Dateistruktur ansehen, werden Sie sehen, dass der App-Ordner der Stammordner ist. Nehmen wir es als übergeordnete Komponente für die heutige Sitzung. Um nun eine untergeordnete Komponente zu erstellen, können wir eine im Terminal mit der Angular-CLI wie folgt generieren:
ng generate component components/child
Dadurch wird eine neue Komponente generiert, die wir heute in unserem Projekt zur untergeordneten Komponente machen werden.
Ihre app.component.html-Datei sollte genau so aussehen:
<div style="text-align: center; padding: 30px;">
<h1>This is the parent component</h1>
<p>In this app, we shall learn about relationships between parent and child components</p>
<hr>
<app-child></app-child>
</div>
Wenn Sie Ihren Browser unter localhost:4200 überprüfen, sollte es jetzt so aussehen:
Wir haben die horizontale Linie, um die beiden Komponenten zu trennen. Ersetzen Sie in der HTML-Datei Ihrer untergeordneten Komponente den Inhalt durch diesen:
<h2>This is the child component</h2>
<p>Click around the heading to display "a new message" inside the parent component</p>
Genau wie im letzten Post über die Input-Decorators, schauen wir uns den Output-Decorator an.
Verwendung des Ausgabe-Decorators
Beim Erstellen von Angular-Anwendungen möchten Sie möglicherweise sicherstellen, dass Sie Daten von einer untergeordneten Komponente an eine übergeordnete Komponente übergeben können. Angular macht dies wirklich einfach, indem es eine Tür namens Output Decorator erstellt, die Sie verwenden können, um dies zu erreichen. Ihre untergeordnete Komponente kann den Output-Decorator verwenden, um ein Ereignis auszulösen und die übergeordnete Komponente mit Hilfe eines Ereignis-Emitters über eine Änderung zu informieren, und so gehen sie Hand in Hand.
Beginnen wir damit, zu zeigen, wie der Ausgabe-Decorator verwendet wird.
Beginnen Sie mit der untergeordneten Komponente
Ersetzen Sie in Ihrer untergeordneten Datei „component.ts“ den Inhalt durch den folgenden Codeblock:
import { Component, OnInit,Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
message: string = 'A new message';
@Output() messageData: EventEmitter<string> = new EventEmitter()
constructor() { }
ngOnInit(): void {
}
sendMessage(){
this.messageData.emit(this.message);
}
}
In der Import-Anweisung haben wir die Ausgabe und den Ereignis-Emitter eingefügt, bevor wir sie verwendet haben, wir haben eine neue Variable namens message deklariert und unsere Tür erstellt und sie mit einem Ereignis-Emitter verknüpft. Als nächstes haben wir eine Methode namens sendMessage erstellt um die Emit-Aktion tatsächlich auszulösen.
Nachdem wir mit dem Einrichten fertig sind, müssen wir ein Ereignis erstellen, das auslöst, dass die Daten von der untergeordneten an die übergeordnete Komponente übergeben werden. Fügen Sie in der Vorlagendatei der untergeordneten Komponente das folgende Ereignis hinzu:
<div (click)="sendMessage()">
<h2>This is the child component</h2>
<p>Click around the heading to display "a new message" inside the parent component</p>
</div>
Wenn also auf die untergeordnete Komponente geklickt wird, sollte die Nachricht an die übergeordnete Komponente gesendet werden.
Daten von untergeordneter Komponente empfangen
Jetzt haben wir die Ausgabe eingerichtet, mit einem Klickereignis verknüpft und die Daten an die übergeordnete Komponente gesendet. Um diese Daten zu erhalten, müssen wir eine Variable erstellen, die den String in unserer übergeordneten Komponente speichert. Innerhalb Ihrer App-Datei sollte die Datei „component.ts“ so aussehen:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
recievedMessage: string = '';
getData(event: any){
this.recievedMessage = event;
}
}
Wir nennen die Zeichenfolge „received message“ und weisen einfach die Ereignisdaten, die wir erhalten, nämlich „eine neue Nachricht“, der neuen Variablen zu. Auf diese Weise haben wir Daten skalierbar von der untergeordneten Komponente an die übergeordnete Komponente übergeben. Ihr Browser sollte so aussehen:
Schlussfolgerung
Dies war eine unterhaltsame Art, den Ausgabe-Decorator kennenzulernen, den Angular bereitstellt, um Daten von der untergeordneten Komponente an die übergeordnete Komponente zu übergeben. In diesem Beitrag haben Sie gesehen, wie es verwendet wird und warum es nützlich sein kann. Viel Spaß beim Hacken!
Quick-Links zu unserer Angular Basics-Datenbindungsserie
- Winkelgrundlagen:Datenbindung Teil 1 – Interpolation
- Grundlagen von Angular:Datenbindung Teil 2 – Ereignisbindung
- Grundlagen von Angular:Datenbindung Teil 3 – Eigenschaftsbindung
- Grundlagen von Angular:Datenbindung Teil 4 – Attributbindung
- Grundlagen von Angular:Datenbindung Teil 5 – Stilbindung
- Grundlagen von Angular:Datenbindung Teil 6 – Eingabe-Decorator
- Grundlagen von Angular:Datenbindung Teil 7 – Ausgabe-Decorator (dieser Beitrag)
- Grundlagen von Angular:Datenbindung Teil 8 – Zwei-Wege-Datenbindung