Komponentenereignisse mit EventEmitter und @Output in Angular

Angular-Komponenten sind die grundlegenden Bausteine der Architektur. Sobald Sie die Komponentenarchitektur verstanden haben, können Sie sich ein Bild davon machen, wie Sie Ihre Schnittstelle basierend auf der Datenkommunikation zusammenstellen können.

In diesem Beitrag werden wir uns mit Angular-Komponenten und der Verwendung von EventEmitter und Outputs befassen, damit wir jede übergeordnete Komponente übertragen oder benachrichtigen können, dass sich etwas geändert hat oder wir es ändern möchten. Dies geschieht normalerweise über “events”, daher unser “EventEmitter”, und basiert auf einem unidirektionalen Datenflusssystem, das einen viel vernünftigeren Ansatz für die Anwendungsentwicklung verfolgt.

Lassen Sie uns die Grundlagen der Eltern-Kind- und Kind-Eltern-Kommunikation durch die Einführung von EventEmitter und @Output abschließen.

Serie

1. Bootstrapping Ihrer ersten Angular-App
2. Erstellen Ihrer ersten Angular-Komponente
3. Übergeben von Daten an Angular-Komponenten mit @Input
4. Komponentenereignisse mit EventEmitter und @Output in Angular

Einführung

Dieses Tutorial behandelt zustandslose Komponentenereignisse mit der EventEmitter API und dem @Output Decorator. Diese ermöglichen es uns, Änderungen oder benutzerdefinierte Ereignisnamen von einer benutzerdefinierten Komponente in Angular auszugeben.

Dieser Beitrag folgt aus dem vorherigen Artikel über die Übergabe von Daten in Winkelkomponenten mit @Input , also lesen Sie das zuerst!

Zustandsbehaftete (übergeordnete) Komponentenbindung

Ähnlich wie im vorherigen Tutorial, in dem wir einen @Input Dekorator eingerichtet haben, um eine Eingabebindung zu akzeptieren, können wir dasselbe tun und das übergeordnete Element abhören, wenn sich ein Wert in unserer untergeordneten Komponente ändert.

Um dies zu tun, kehren wir zu unserer übergeordneten Komponente zurück, die unsere Anzahl rendert:

Ich habe hier ein paar Ergänzungen vorgenommen:

• Geändert initialCount zu myCount, wir setzen keinen “initialCount” mehr, daher wird der Zählstatus im übergeordneten Element verwaltet, sobald die untergeordnete Komponente eine Änderung daran vornimmt
• Erstellt eine benutzerdefinierte change -Eigenschaft für die <counter> -Vorlage unter Verwendung der () -Ereignisbindungssyntax, wie wir bei der Erstellung unserer ersten Komponente gelernt haben Dies bedeutet eine Art Ereignis (z. B. eine click bei Verwendung auf einem nativen Elementknoten).
• Protokollierte die myCount -Eigenschaft im übergeordneten
• Fügte der Klasse eine countChange() {} -Methode hinzu und übergab sie an den (change) -Ereignis-Listener

🎉 Laden Sie es kostenlos herunter!

Gehen Sie über Array ForEach hinaus. Machen Sie sich mit erweiterten Methoden wie Reduce , Find, Filter, Every, Some und Map vertraut und verstehen Sie, wie Sie JavaScript-Datenstrukturen verwalten.

• Verstehen Sie vollständig, wie Sie JavaScript-Datenstrukturen mit unveränderlichen Operationen verwalten
• 31 seiten mit tiefer Syntax, Beispielen aus der Praxis, Tipps und Tricks
• Schreiben Sie innerhalb von 3 Stunden sauberere und besser strukturierte Programmierlogik

✅ Erfolg! Überprüfen Sie Ihre E-Mails, genießen.

Als zusätzlichen Bonus senden wir Ihnen auch einige zusätzliche Goodies über ein paar zusätzliche E-Mails.

Dadurch wird unser endgültiger unidirektionaler Datenfluss eingerichtet. Die Daten fließen von der AppComponent -Klasse in die “, der Zähler kann dann die Werte ändern – und sobald sich der Wert geändert hat, erwarten wir, dass countChange() aufgerufen wird. Wir müssen das jetzt verkabeln.

@Output decorator

Ähnlich wie bei Inputkönnen wir Output importieren und eine neue change Eigenschaft in unserem CounterComponent:

Dadurch werden die Metadaten konfiguriert, die erforderlich sind, um Angular mitzuteilen, dass diese Eigenschaft als Ausgabebindung behandelt werden soll. Es muss jedoch neben etwas sitzen, das EventEmitter genannt wird.

EventEmitter

Das ist der interessante Teil. Um unser Output verwenden zu können, müssen wir eine neue Instanz des EventEmitter importieren und daran binden:

Mit TypeScript in vollem Umfang würden wir so etwas tun, um den Typ des Ereigniswerts anzuzeigen, den wir ausgeben, und unsere change Ausgabe ist vom Typ EventEmitter. In unserem Fall geben wir einen number Typ aus:

Aufrufen des EventEmitter

Also, was passiert hier? Wir haben eine change -Eigenschaft erstellt und eine neue Instanz von EventEmitter daran gebunden – was kommt als nächstes?

Wir können einfach unsere this.change -Methode aufrufen – da sie jedoch auf eine Instanz von EventEmitter verweist, müssen wir .emit() aufrufen, um ein Ereignis an das übergeordnete Element auszugeben:

Dies gibt dann eine Änderung an unserem (change) -Listener aus, den wir im übergeordneten Element eingerichtet haben, für den unser countChange($event) -Rückruf aufgerufen wird, und die mit dem Ereignis verknüpften Daten werden eigentum.

Stateful Callback Assignment

Hier ist, was wir tun müssen, um this.myCount mit dem event , das zurückgegeben wird. Ich werde unten erklären, warum:

Dies erzeugt einen reinen unidirektionalen Datenfluss. Die Daten stammen von AppComponent, fließen in unseren Zähler, der Zähler nimmt eine Änderung vor und sendet diese Änderung auf unseren Befehl zurück an das übergeordnete Element – über das von uns eingerichtete EventEmitter . Sobald wir diese Daten gesichert haben, führen wir diese Änderungen wieder in unsere übergeordnete (zustandsbehaftete) Komponente ein.

Der Grund, warum wir dies tun, ist zu demonstrieren, dass Parent: {{ myCount }} gleichzeitig aktualisiert, während Output das übergeordnete Element informiert.

Bonus: Benutzerdefinierte Eigenschaftsnamen

Ähnlich wie wir mit @Input() und dem Erstellen benutzerdefinierter Eigenschaftsnamen gelernt haben, können wir dasselbe auch mit @Output() tun.

Nehmen wir an, wir ändern die (change) -Bindung in (update):

Wir können unseren benutzerdefinierten Eigenschaftsnamen anschließen, während wir den internen @Output Eigenschaftsnamen beibehalten:

Im Wesentlichen teilen wir Angular hier nur mit, update als die Eigenschaft zu suchen, an die gebunden werden soll, und wir können weiterhin this.change intern verwenden.

Da haben Sie es also, die Anleitung zur Verwendung von Ausgaben mit EventEmitter in Angular-Komponenten. Jetzt verstehen Sie das Modell, Happy Coding!

Um mehr Techniken, Best Practices und Expertenwissen aus der Praxis zu erfahren, empfehle ich dringend, meine Angular-Kurse zu besuchen – sie werden Sie auf Ihrem Weg zur vollständigen Beherrschung von Angular begleiten!