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 una nuova 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: <div class="parent-component">
  <h1> This is the parent component </h1>
</div>
3. Aggiungi uno stile al componente dell’app principale in “app.component.css”: .parent-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightcoral;
  padding: 20px
}
4. Usa il comando “ng generate component” per creare un nuovo componente Angular chiamato “data-component”. In questo esempio, “data-component” rappresenterà il componente figlio. ng g c data-component
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: <div class="child-component">
  <p> This is the child component </p>
  <button (click)="onButtonClick()">Click me</button>
</div>
6. Aggiungi uno stile al componente figlio in “data-component.component.css”: .child-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightblue;
  margin: 20px;
  padding: 20px
}
7. Aggiungi la funzione onButtonClick() al file TypeScript per il componente, in “data-component.component.ts”: onButtonClick() {
}
8. Sempre all’interno del file TypeScript, aggiungi “Output” e “EventEmitter” all’elenco delle importazioni: import { Component, Output, EventEmitter, OnInit } from '@angular/core';
9. All’interno della classe DataComponentComponent dichiarare una variabile Output per il componente chiamato “buttonWasClicked”. Questo sarà un EventEmitter. Un EventEmitter è una classe integrata che consente di informare un altro componente quando si verifica un evento. export class DataComponentComponent implements OnInit {
  @Output() buttonWasClicked = new EventEmitter<void>();
  //. ..
}
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. onButtonClick() {
    this.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. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
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. message: string = ""


   buttonInChildComponentWasClicked() {
    this.message = 'The button in the child component was clicked';
}

3. Visualizza il messaggio in “app.component.html”: <p>{{message}}</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. Fare clic sul pulsante Cliccami . 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. listOfPeople: string[] = ['Joey', 'John', 'James'];
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: @Output() buttonWasClicked = new EventEmitter<string[]>();
3. Modificare la funzione onButtonClick(). Quando invii l’evento al componente principale, aggiungi i dati come argomento nella funzione emit(): onButtonClick() {
    this.buttonWasClicked.emit(this.listOfPeople);
}
4. In “app.component.html”, modifica il tag “app-data-component”. Aggiungere “$event” nella funzione buttonInChildComponentWasClicked(). Questo contiene i dati inviati dal componente figlio. <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
5. Aggiorna la funzione in “app.component.ts” per aggiungere il parametro per i dati: buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
}
6. Aggiungi una nuova variabile chiamata “dati” per memorizzare i dati provenienti dal componente figlio: message: string = ""
data: string[] = []


   buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
    this.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. Fare clic sul pulsante Cliccami . 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.