Kommunikation zwischen Angular-Komponenten

Name: Kommunikation zwischen Angular-Komponenten
Author: Michaela Ochnich

In diesem Kapitel werden verschiedene Möglichkeiten zum Senden von Informationen zwischen Komponenten demonstriert, je nach ihrer Beziehung zueinander. Sie erfahren, wie Sie Informationen von Eltern zu Kind, von Kind zu Eltern oder in beide Richtungen zwischen zwei Komponenten weitergeben.

Preview the first lesson free — get full access to all 7 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

Diese Lektion wird es dir zeigen wie man die input-Eigenschaft verwendet um Informationen von einer übergeordneten an eine untergeordnete Komponente zu senden. Hier habe ich also eine Starter-Anwendung die mit der Angular-CLI generiert wurde. Und zuerst werde ich eine übergeordnete Komponente generieren und eine untergeordnete Komponente, zwischen der Informationen weitergegeben werden. Und hier habe ich einfach die Testdateigenerierung übersprungen und die separate CSS-Datei. Und dann in der Stammanwendungskomponentenvorlage, Ich werde den gesamten Startercode löschen, und fügen Sie dann diese übergeordnete Komponente hinzu. Nun, da das eingerichtet ist, Ich werde die übergeordnete Vorlage öffnen und dann darin die untergeordnete Komponente einbetten. Nun, diese untergeordnete Komponente ist in der Elternkomponente, Ich werde die untergeordnete Komponentenklasse öffnen, und dann importiere ich den Input-Decorator aus der Angular-Kernbibliothek. So können Eingabeeigenschaften zum Senden von Informationen verwendet werden von einer übergeordneten Komponente zu einer untergeordneten Komponente, und es hält diese Informationen synchron. Als nächstes deklariere ich eine Eingabeeigenschaft in der untergeordneten Komponentenklasse. Der Eingabe-Dekorator ist also das, was die Nachricht markiert als Eingabeeigenschaft, und eine Eingabeeigenschaft ist an eine Eigenschaft im Dom gebunden. In diesem Fall wird es in die übergeordnete Komponente eingebunden. Wenn diese Eigenschaft im Dom des übergeordneten Elements aktualisiert wird, Angular aktualisiert diese Eingabeeigenschaft auch in der untergeordneten Komponentenklasse, Das ist es, was diese Daten synchron hält. Hier habe ich also die Eigenschaft eingestellt mit einem bestimmten Zuweisungsoperator, da diese Eigenschaft wird seinen Anfangswert vom Elternteil erhalten. Sie können jedoch auch einen Standardwert festlegen für die Immobilie so. Also hier, wenn diese Komponente nicht initialisiert wurde ohne dass die Eingabeeigenschaft gebunden ist in der Elternkomponente, dann würde dieser Nachrichtenwert standardmäßig begrüßen. Und als nächstes werde ich diese Nachricht anzeigen in der Vorlage für untergeordnete Komponenten. Nun, da die untergeordnete Komponente für den Empfang eingerichtet ist dieser Eingabewert, das Elternteil muss diesen Wert an das Kind weitergeben. Also zuerst in der übergeordneten Komponentenklasse, Ich werde eine zu übergebende Nachricht definieren. Dann in der übergeordneten Vorlage, Ich werde dies an die Eingabeeigenschaft der untergeordneten Komponenten binden. Also verwende ich hier die Eigenschaftsbindung, was mit den eckigen Klammern gemacht wird um die übergeordnete Nachrichtenvariable zu binden zur Nachrichteneingabeeigenschaft die in der untergeordneten Komponente erstellt wurde. Und das dann im Browser anzeigen, Sie können die Nachricht sehen, die in der übergeordneten Komponente festgelegt wurde wird an die untergeordnete Komponente übergeben und dort angezeigt. Vielleicht möchten Sie sich also manchmal auf diesen Eingabewert beziehen durch einen anderen Namen innerhalb der untergeordneten Komponentenklasse. In diesen Fällen können Sie einen Alias erstellen für die Eingabeeigenschaft. Zurück zur untergeordneten Komponentenklasse: Ich werde diese Eigenschaft in übergeordnete Nachricht umbenennen. Und dann im Eingabedekorator, Übergeben Sie den Eigenschaftsnamen, den die übergeordnete Komponente ist bindend. In diesem Fall ist das die Botschaft. Und jetzt, da die untergeordnete Komponente es weiß diese Eingabeeigenschaft als übergeordnete Nachricht, Die Vorlage muss aktualisiert werden. Und das dann im Browser ansehen Sie können das sehen, diese Nachricht wird immer noch weitergeleitet von Eltern zu Kind. Das ist alles für diese Lektion zur Verwendung von Eingabeeigenschaften zur Kommunikation von der übergeordneten zur untergeordneten Komponente. Und in der nächsten Lektion, Sie erfahren, wie Sie Änderungen an Eingabewerten abfangen können Setter und Getter verwenden.

Mittelstufe Anbieter : Michaela Ochnich 7 Lektionen · 36m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

In diesem Kapitel werden verschiedene Möglichkeiten aufgezeigt, wie Sie Informationen zwischen Komponenten übermitteln können, je nach ihrer Beziehung zueinander. Sie werden lernen, wie Sie Informationen von der übergeordneten Komponente an die untergeordnete Komponente, von der untergeordneten Komponente an die übergeordnete Komponente oder in beide Richtungen zwischen zwei Komponenten weitergeben können. Sie werden auch lernen, wie Sie einige dieser Datenänderungen abfangen und sie bei Bedarf vor der Verwendung in der Komponente ändern können.

Was Sie lernen werden

Senden Sie Daten von einer übergeordneten Komponente an eine untergeordnete Komponente mit Input, Setters and Getters und OnChanges
Senden Sie Daten von einer untergeordneten Komponente an eine übergeordnete Komponente mit Output und EventEmitter
Greifen Sie über die Vorlage oder die Klasse der übergeordneten Komponente auf eine untergeordnete Komponente zu, indem Sie ViewChild und Referenzvariablen verwenden
Kommunizieren Sie bidirektional zwischen zwei Komponenten
Fangen Sie Datenänderungen ab und ändern Sie sie, bevor Sie in der Komponente verwendet werden
Teilen Sie Daten zwischen Komponenten mit einem gemeinsamen Service

Wichtige Erkenntnisse

Die Art und Weise, wie Sie zwischen Angular-Komponenten kommunizieren, hängt von ihrer Beziehung zueinander ab.
Informationen können von übergeordnet zu untergeordnet, von untergeordnet zu übergeordnet oder bidirektional zwischen zwei Komponenten übergeben werden.
Einige Datenänderungen können abgefangen und geändert werden, bevor Sie in der Komponente verwendet werden.
Eine übergeordnete Komponente kann auf eine untergeordnete Komponente über die Vorlage oder die Klasse der übergeordneten Komponente zugreifen.
Ein gemeinsamer Service ist ein Ansatz zur Kommunikation zwischen Komponenten.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Dieses Kapitel zeigt verschiedene Möglichkeiten, um Informationen zwischen Angular-Komponenten zu senden, je nach ihrer Beziehung, einschließlich der Übergabe von Daten von übergeordnet zu untergeordnet, von untergeordnet zu übergeordnet oder bidirektional zwischen zwei Komponenten, sowie das Abfangen von Datenänderungen, um sie vor der Verwendung zu ändern.

Was werde ich in diesem Kurs lernen zu tun?

Sie lernen, wie Sie Daten von einer untergeordneten Komponente an eine übergeordnete Komponente senden, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente senden, auf eine untergeordnete Komponente über die Vorlage oder die Klasse der übergeordneten Komponente zugreifen und bidirektional zwischen zwei Komponenten kommunizieren.

Welche Themen oder Techniken werden in den Lektionen unterrichtet?

Die Lektionen behandeln Input, Setters and Getters, OnChanges, Output und EventEmitter, ViewChild, Shared Service und Referenzvariablen.

Welche Fähigkeiten hilft dieser Kurs beim Aufbau?

Es baut Fähigkeiten in Angular Components, Communication Diagrams, Component Diagram, Component Libraries, Connected Components und HTML Components auf.

Kann ich lernen, Daten zu ändern, bevor eine Komponente sie verwendet?

Ja. Der Kurs lehrt, wie man einige dieser Datenänderungen abfängt und bei Bedarf ändert, bevor Sie sie in der Komponente verwenden.