Per i neofiti, l’architettura basata su componenti di Angular richiede un po’ di tempo per abituarsi. A differenza del design orientato agli oggetti (OOP) dei linguaggi di programmazione come Java, Angular non è in grado di imporre l’incapsulamento con la stessa voracità, principalmente a causa dell’accesso illimitato di JavaScript al DOM. Ma, come si dice, solo perché tu PUÒ fai qualcosa, non significa che tu DOVREBBERO. Quindi, piuttosto che fare affidamento sul compilatore per impedirti di infrangere le regole, è meglio imparare a fare le cose in “modo angolare” dall’inizio in modo da codificare le tue applicazioni in modo tale da imporre l’incapsulamento dei componenti lo mina. A tal fine, questo tutorial fornirà una panoramica su come passare i dati tra i componenti padre e figlio, sia dal genitore al figlio e viceversa.

L’app demo

Di solito posto un link alla demo alla fine dell’articolo, ma questa volta lo presento in anticipo, in modo che il palcoscenico sia pronto per la codifica a venire. Spero che tu abbia fame, perché questa demo accetta ordini per la pizza!

Sopra la linea orizzontale abbiamo il contenuto principale, che include un input di testo e un pulsante per inviare richieste speciali. Sotto c’è un elenco di condimenti, selezionati dal componente figlio sottostante. Allo stesso modo, le richieste speciali vengono visualizzate nel bambino sotto l’elenco dei condimenti. (L’ho tenuto tra i primi 10 condimenti ai fini della demo)

Usando questa configurazione, il genitore deve passare le richieste speciali insieme al componente figlio, mentre il bambino deve inviare le ricariche selezionate al genitore.

Troverai la demo su codeandbox.io.

Passaggio di dati dal componente padre a un figlio

Nell’app demo, il componente figlio, il cui selettore è “app-bambino“, si può vedere in fondo alla pagina principale app.component.html file modello:

<h1>Welcome to Rob's Pizza Parlour!</h1>
<input size="80" #request type="text" placeholder="Enter any special requests here.">
<button (click)="requests = request.value">Add</button>

<h2>Selected Toppings:</h2>
<ol>
  <li *ngFor="let topping of toppings">{{topping}}</li>
</ol>

<span class="component-delineation">(Child Component Below)</span>
<hr>
<app-child [requests]="requests" (selectedToppingsEmitter)="setSelectedToppings($event)"></app-child>

Lì, noterai che ha due attributi speciali:

1. [requests]=”richieste”
2. (selectedToppingsEmitter)=”setSelectedToppings($evento)”

Per ora ci concentreremo sul primo (richiesta) attributo. È una variabile pubblica che stiamo passando al componente app-child:

export class AppComponent {
  public requests="";
  
  //...
}

Per consumare il valore della richiesta, il Componente figlio ha bisogno di definire un @Ingresso decoratore come segue:

export class ChildComponent {
  @Input() requests: string = '';
  
  //...
}

Sebbene abbia assegnato lo stesso nome alla variabile sia nel genitore che nel figlio per motivi di coerenza, non è assolutamente necessario farlo.

Ora possiamo trattare la variabile delle richieste come qualsiasi altra. Dal momento che non abbiamo bisogno di fare alcun massaggio dei dati, possiamo fare riferimento direttamente nel modello usando doppie parentesi graffe {{}}:

<h2>Special requests</h2>
{{requests}}

Passaggio di dati da un componente figlio al genitore

Proprio come un @Ingresso decoratore definisce una variabile che proviene dal componente genitore, an @Produzione() decorator definisce una variabile da passare al genitore. O meglio, definisce un EventEmitter quello sarà emettere() dati al genitore. Il EventEmitter è parametrizzato in modo che sappia quale tipo di dati gestirà. Nel nostro caso, sarà l’array di stringhe selectedToppings:

export class ChildComponent {
  
  @Input() requests: string = '';
  @Output() selectedToppingsEmitter = new EventEmitter<string[]>();

  private selectedToppings: string[] = [];
  //...
}

Il passo successivo è quello di emettere effettivamente il Condimenti selezionati. Lo faremo nel checkValue() metodo. Viene invocato ogni volta che una casella di spunta è selezionata o deselezionata. Innanzitutto, aggiungiamo o rimuoviamo l’elemento dall’array. Quindi, emettiamo l’intero array aggiornato al genitore:

public checkValue(event: Event) {
  const checkbox: HTMLInputElement | null = (event.target as HTMLInputElement);
  if (checkbox) {
    if (checkbox.checked) {
      this.selectedToppings.push(checkbox.value);
    } else {
      const index = this.selectedToppings.indexOf(checkbox.value);
      this.selectedToppings.splice(index, 1);
    }
    this.selectedToppingsEmitter.emit(this.selectedToppings);
  }
}

Per invocare il checkValue() metodo, dobbiamo associarlo all’evento di modifica della casella di controllo in questo modo:

<h1>Toppings List</h1>
<div>
<label> {{topping}}
<input type="checkbox">
</label>
</div>

Tornando al modello principale, il selezionatoCondimentiEmettitore è legato a un metodo componente pubblico. Si noti che, in questo caso, il nome dell’Emettitore deve corrispondere esattamente a quello del bambino. Tuttavia, il nome del metodo associato può essere qualsiasi cosa ci piaccia. Puoi vederlo qui nel markup dell’elemento app-child:

<app-child [requests]="requests" (selectedToppingsEmitter)="setSelectedToppings($event)"></app-child>

Nel metodo setSelectedToppings(), imposteremo il nostro local condimenti variabile all’emesso Condimenti selezionati. In quanto tale, non è altro che un setter:

export class AppComponent {
  public toppings: string[] = [];
  public requests="";

  setSelectedToppings(selectedToppings: string[]) {
    this.toppings = selectedToppings;
  }
}

Infine, an *ngFor loop viene impiegato per elencare tutti i condimenti selezionati all’interno di un elenco ordinato:

<h2>Selected Toppings:</h2>
<ol>
  <li *ngFor="let topping of toppings">{{topping}}</li>
</ol>

Conclusione

In questo tutorial, abbiamo imparato come passare i dati tra i componenti padre e figlio, sia dal genitore al figlio e viceversa. La prossima volta, risponderemo alla domanda su come rispondere a @Ingresso gli aggiornamenti dei parametri e come intercettarli prima di emetterli nei nostri file modello.