Come utilizzare il decoratore di output in Angular

In Angular, una pagina web può contenere molti componenti riutilizzabili diversi. Ogni componente di solito contiene la propria logica TypeScript, modello HTML e stile CSS.

È inoltre possibile riutilizzare i componenti all'interno di altri componenti. In questo caso, puoi utilizzare il decoratore di output per inviare informazioni da un componente figlio al suo componente padre.

È inoltre possibile utilizzare il decoratore di output per ascoltare gli eventi che si verificano nel componente figlio.

Come aggiungere il decoratore di output a un componente figlio

Innanzitutto, dovrai creare una nuova app Angular con un componente padre e un componente figlio.

Una volta che hai un componente padre e figlio, puoi utilizzare il decoratore di output per trasferire dati e ascoltare eventi tra i due componenti.

1. Crea un nuovo Applicazione angolare. Per impostazione predefinita, "app" è il nome del componente principale. Questo componente include tre file principali: "app.component.html", "app.component.css" e "app.component.ts".
2. Per questo esempio, il componente "app" fungerà da componente principale. Sostituisci tutto il contenuto in "app.component.html" con quanto segue:

   <divclasse="componente genitore">
   <h1> Questo è il componente principale h1>
   div>

3. Aggiungi uno stile al componente dell'app principale in "app.component.css":

   .componente-genitore {
   famiglia di font: Aria, Helvetica, sans-serif;
   colore di sfondo: lightcoral;
   imbottitura: 20px
   }

4. Utilizzare il comando "ng generate component" per creare un nuovo componente angolare chiamato "componente di dati". In questo esempio, "data-component" rappresenterà il componente figlio.

   ng g c componente dati

5. Aggiungi contenuto al componente figlio in "data-component.component.html". Sostituisci il contenuto corrente per aggiungere un nuovo pulsante. Associa il pulsante a una funzione che verrà eseguita quando l'utente fa clic su di esso:

   <divclasse="componente figlio">
   <P> Questo è il componente figlio P>
   <pulsante (clic)="clicsulpulsante()">Cliccamipulsante>
   div>

6. Aggiungi uno stile al componente figlio in "data-component.component.css":

   .componente-figlio {
   famiglia di font: Aria, Helvetica, sans-serif;
   colore di sfondo: azzurro;
   margine: 20px;
   imbottitura: 20px
   }

7. Aggiungi la funzione onButtonClick() al file TypeScript per il componente, in "data-component.component.ts":

   clic sul pulsante() {
   }

8. Sempre all'interno del file TypeScript, aggiungi "Output" e "EventEmitter" all'elenco delle importazioni:

   importare {Componente, Output, EventEmitter, OnInit} da'@angolare/core';

9. All'interno della classe DataComponentComponent dichiarare una variabile Output per il componente denominato "buttonWasClicked". Questo sarà un EventEmitter. Un EventEmitter è una classe integrata che consente di informare un altro componente quando si verifica un evento.

   esportareclasse DataComponentComponent implementa OnInit {
   @Produzione() buttonWasClicked = nuovo Emettitore di eventi<vuoto>();
   // ...
   }

10. Utilizzare l'emettitore di eventi "buttonWasClicked" all'interno della funzione onButtonClick(). Quando l'utente fa clic sul pulsante, il componente dati invierà questo evento al componente dell'app principale.

    clic sul pulsante() {
    Questo.buttonWasClicked.emit();
    }

Come ascoltare gli eventi nel componente figlio dal componente padre

Per utilizzare la proprietà Output del componente figlio, sarà necessario ascoltare l'evento emesso dal componente padre.

1. Usa il componente figlio all'interno di "app.component.html". È possibile aggiungere l'output "buttonWasClicked" come proprietà durante la creazione del tag HTML. Associa l'evento a una nuova funzione.

   <componente-dati-app (buttonWasClicked)="buttonInChildComponentWasClicked()">componente-dati-app>

2. All'interno di "app.component.ts", aggiungi la nuova funzione per gestire l'evento clic del pulsante quando si verifica nel componente figlio. Crea un messaggio quando l'utente fa clic sul pulsante.

   Messaggio: corda = ""
   buttonInChildComponentWasClicked() {
   Questo.messaggio = "È stato fatto clic sul pulsante nel componente figlio";
   }

3. Visualizza il messaggio in "app.component.html":

   <P>{{Messaggio}}P>

4. Digita il comando "ng serve" in un terminale per eseguire la tua applicazione Angular. Aprilo in un browser Web su localhost: 4200. I componenti padre e figlio utilizzano colori di sfondo diversi per semplificarne la distinzione.
5. Clicca sul Cliccami pulsante. Il componente figlio invierà l'evento al componente padre, che visualizzerà il messaggio.

Come inviare dati da un componente figlio a un componente padre

Puoi anche inviare dati dal componente figlio al componente padre.

1. In "data-component.component.ts", aggiungi una variabile per memorizzare un elenco di stringhe contenenti alcuni dati.

   elencoDiPersone: corda[] = ["Joey", 'John', 'Giacomo'];

2. Modificare il tipo restituito dell'emettitore di eventi buttonWasClicked. Cambialo da void a string[], in modo che corrisponda all'elenco di stringhe che hai dichiarato nel passaggio precedente:

   @Produzione() buttonWasClicked = nuovo Emettitore di eventi<corda[]>();

3. Modificare la funzione onButtonClick(). Quando invii l'evento al componente principale, aggiungi i dati come argomento nella funzione emit():

   clic sul pulsante() {
   Questo.buttonWasClicked.emit(Questo.listOfPeople);
   }

4. In "app.component.html", modifica il tag "app-data-component". Aggiungi "$event" nella funzione buttonInChildComponentWasClicked(). Questo contiene i dati inviati dal componente figlio.

   <componente-dati-app (buttonWasClicked)="buttonInChildComponentWasClicked($event)">componente-dati-app>

5. Aggiorna la funzione in "app.component.ts" per aggiungere il parametro per i dati:

   buttonInChildComponentWasClicked (dataFromChild: corda[]) {
   Questo.messaggio = "È stato fatto clic sul pulsante nel componente figlio";
   }

6. Aggiungi una nuova variabile chiamata "data" per memorizzare i dati provenienti dal componente figlio:

   Messaggio: corda = ""
   dati: corda[] = []
   buttonInChildComponentWasClicked (dataFromChild: corda[]) {
   Questo.messaggio = "È stato fatto clic sul pulsante nel componente figlio";
   Questo.data = dataFromChild;
   }

7. Visualizza i dati nella pagina HTML:

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

8. Digita il comando "ng serve" in un terminale per eseguire la tua applicazione Angular. Aprilo in un browser Web su localhost: 4200.
9. Clicca sul Cliccami pulsante. Il componente figlio invierà i dati dal componente figlio al componente padre.

Invio di dati ad altri componenti utilizzando il decoratore di output

Ci sono altri decoratori che puoi usare in Angular, come il decoratore Input o il decoratore Component. Puoi saperne di più su come utilizzare altri decoratori in Angular per semplificare il tuo codice.