So verwenden Sie den Output Decorator in Angular

In Angular kann eine Webseite viele verschiedene wiederverwendbare Komponenten enthalten. Jede Komponente enthält normalerweise ihre eigene TypeScript-Logik, HTML-Vorlage und CSS-Stil.

Sie können Komponenten auch in anderen Komponenten wiederverwenden. In diesem Fall können Sie den Output-Decorator verwenden, um Informationen von einer untergeordneten Komponente zurück an ihre übergeordnete Komponente zu senden.

Sie können auch den Output-Decorator verwenden, um Ereignisse abzuhören, die in der untergeordneten Komponente auftreten.

So fügen Sie den Ausgabe-Decorator einer untergeordneten Komponente hinzu

Zuerst müssen Sie eine neue Angular-App mit einer übergeordneten Komponente und einer untergeordneten Komponente erstellen.

Sobald Sie eine übergeordnete und eine untergeordnete Komponente haben, können Sie den Output-Decorator verwenden, um Daten zu übertragen und Ereignisse zwischen den beiden Komponenten abzuhören.

1. Erstelle eine neue Eckige Anwendung. Standardmäßig ist "app" der Name der Root-Komponente. Diese Komponente enthält drei Hauptdateien: „app.component.html“, „app.component.css“ und „app.component.ts“.
2. In diesem Beispiel fungiert die „app“-Komponente als übergeordnete Komponente. Ersetzen Sie den gesamten Inhalt in „app.component.html“ durch Folgendes:

   <divKlasse="Elternkomponente">
   <h1> Dies ist die übergeordnete Komponente h1>
   div>

3. Fügen Sie der übergeordneten App-Komponente in „app.component.css“ ein Styling hinzu:

   .parent-Komponente {
   Schriftfamilie: Arial, Helvetica, serifenlos;
   Hintergrundfarbe: hellkoralle;
   Polsterung: 20px
   }

4. Verwenden Sie dazu den Befehl „ng generate component“. Erstellen Sie eine neue Angular-Komponente "Datenkomponente" genannt. In diesem Beispiel repräsentiert "data-component" die untergeordnete Komponente.

   ng g c Datenkomponente

5. Fügen Sie Inhalt zur untergeordneten Komponente in "data-component.component.html" hinzu. Ersetzen Sie den aktuellen Inhalt, um eine neue Schaltfläche hinzuzufügen. Binden Sie die Schaltfläche an eine Funktion, die ausgeführt wird, wenn der Benutzer darauf klickt:

   <divKlasse="Kind-Komponente">
   <P> Dies ist die untergeordnete Komponente P>
   <Taste (klicken)="onButtonClick()">Klick michTaste>
   div>

6. Fügen Sie der untergeordneten Komponente in „data-component.component.css“ ein Styling hinzu:

   .child-Komponente {
   Schriftfamilie: Arial, Helvetica, serifenlos;
   Hintergrundfarbe: hellblau;
   Rand: 20px;
   Polsterung: 20px
   }

7. Fügen Sie die Funktion onButtonClick() zur TypeScript-Datei für die Komponente in „data-component.component.ts“ hinzu:

   onButtonClick() {
   }

8. Fügen Sie noch in der TypeScript-Datei "Output" und "EventEmitter" zur Importliste hinzu:

   importieren { Komponente, Ausgabe, EventEmitter, OnInit } aus'@eckig/Kern';

9. Deklarieren Sie innerhalb der DataComponentComponent-Klasse eine Ausgabevariable für die Komponente namens „buttonWasClicked“. Dies wird ein EventEmitter sein. Ein EventEmitter ist eine integrierte Klasse, mit der Sie eine andere Komponente informieren können, wenn ein Ereignis eintritt.

   ExportKlasse DatenkomponenteKomponente implementiert OnInit {
   @Ausgang() buttonWasClicked = neu EventEmitter<Leere>();
   // ...
   }

10. Verwenden Sie den Emitter „buttonWasClicked“ innerhalb der Funktion onButtonClick(). Wenn der Benutzer auf die Schaltfläche klickt, sendet die Datenkomponente dieses Ereignis an die übergeordnete App-Komponente.

    onButtonClick() {
    Das.buttonWasClicked.emit();
    }

So hören Sie Ereignisse in der untergeordneten Komponente von der übergeordneten Komponente ab

Um die Output-Eigenschaft der untergeordneten Komponente zu verwenden, müssen Sie das von der übergeordneten Komponente ausgegebene Ereignis abhören.

1. Verwenden Sie die untergeordnete Komponente in „app.component.html“. Sie können die Ausgabe „buttonWasClicked“ beim Erstellen des HTML-Tags als Eigenschaft hinzufügen. Binden Sie das Ereignis an eine neue Funktion.

   <App-Daten-Komponente (Schaltfläche wurde angeklickt)="buttonInChildComponentWasClicked()">App-Daten-Komponente>

2. Fügen Sie in „app.component.ts“ die neue Funktion hinzu, um das Klickereignis der Schaltfläche zu verarbeiten, wenn es in der untergeordneten Komponente auftritt. Erstellen Sie eine Nachricht, wenn der Benutzer auf die Schaltfläche klickt.

   Nachricht: Schnur = ""
   buttonInChildComponentWasClicked() {
   Das.nachricht = 'Auf die Schaltfläche in der untergeordneten Komponente wurde geklickt';
   }

3. Zeigen Sie die Nachricht in "app.component.html" an:

   <P>{{Nachricht}}P>

4. Geben Sie den Befehl „ng serve“ in ein Terminal ein, um Ihre Angular-Anwendung auszuführen. Öffnen Sie es in einem Webbrowser unter localhost: 4200. Die übergeordneten und untergeordneten Komponenten verwenden unterschiedliche Hintergrundfarben, um die Unterscheidung zu erleichtern.
5. Klick auf das Klick mich Taste. Die untergeordnete Komponente sendet das Ereignis an die übergeordnete Komponente, die die Nachricht anzeigt.

So senden Sie Daten von einer untergeordneten Komponente an eine übergeordnete Komponente

Sie können auch Daten von der untergeordneten Komponente an die übergeordnete Komponente senden.

1. Fügen Sie in "data-component.component.ts" eine Variable hinzu, um eine Liste von Zeichenfolgen zu speichern, die einige Daten enthalten.

   listOfPeople: Schnur[] = ['Joey', 'John', 'James'];

2. Ändern Sie den Rückgabetyp des Emitters des Ereignisses buttonWasClicked. Ändern Sie es von void in string[], damit es mit der Liste der Strings übereinstimmt, die Sie im vorherigen Schritt deklariert haben:

   @Ausgang() buttonWasClicked = neu EventEmitter<Schnur[]>();

3. Ändern Sie die Funktion onButtonClick(). Wenn Sie das Ereignis an die übergeordnete Komponente senden, fügen Sie die Daten als Argument in die Funktion emit() ein:

   onButtonClick() {
   Das.buttonWasClicked.emit(Das.listOfPeople);
   }

4. Ändern Sie in „app.component.html“ das Tag „app-data-component“. Fügen Sie das „$event“ in die Funktion buttonInChildComponentWasClicked() ein. Diese enthält die von der untergeordneten Komponente gesendeten Daten.

   <App-Daten-Komponente (Schaltfläche wurde angeklickt)="buttonInChildComponentWasClicked($event)">App-Daten-Komponente>

5. Aktualisieren Sie die Funktion in „app.component.ts“, um den Parameter für die Daten hinzuzufügen:

   buttonInChildComponentWasClicked (dataFromChild: Schnur[]) {
   Das.nachricht = 'Auf die Schaltfläche in der untergeordneten Komponente wurde geklickt';
   }

6. Fügen Sie eine neue Variable namens "data" hinzu, um die Daten zu speichern, die von der untergeordneten Komponente stammen:

   Nachricht: Schnur = ""
   Daten: Schnur[] = []
   buttonInChildComponentWasClicked (dataFromChild: Schnur[]) {
   Das.nachricht = 'Auf die Schaltfläche in der untergeordneten Komponente wurde geklickt';
   Das.data = dataFromChild;
   }

7. Anzeige der Daten auf der HTML-Seite:

   <P>{{data.join(', ')}}P>

8. Geben Sie den Befehl „ng serve“ in ein Terminal ein, um Ihre Angular-Anwendung auszuführen. Öffnen Sie es in einem Webbrowser unter localhost: 4200.
9. Klick auf das Klick mich Taste. Die untergeordnete Komponente sendet die Daten von der untergeordneten Komponente an die übergeordnete Komponente.

Senden von Daten an andere Komponenten mit dem Output Decorator

Es gibt andere Dekoratoren, die Sie in Angular verwenden können, z. B. den Input-Dekorator oder den Komponenten-Dekorator. Sie können mehr darüber erfahren, wie Sie andere Decorators in Angular verwenden können, um Ihren Code zu vereinfachen.