Angular2 – Passare dati da un componente padre ad un componente figlio


Immaginiamo di stare sviluppando una semplice applicazione in cui dobbiamo passare dei dati da un componente padre PaintingComponent ad un componente figlio ArtistComponent.

ArtistComponent e PaintingComponent

In questa prima implementazione, i componenti non sono a conoscenza l’uno dell’altro. Il tag <app-artist></app-artist> rimane, inerte, nel DOM. Questo significa che i due componenti sono completamente disaccoppiati e che dobbiamo introdurre solo la logica per creare una connessione tra loro.

Il PaitingComponent contiene, all’interno del suo template, il tag <app-artist></app-artist>. Perciò, dobbiamo renderlo consapevole dell’esistenza del ArtistComponent. Per farlo, ci basta aggiungerlo nel modulo in cui è dichiarato anche il PaintingComponent.

app.module.ts

Grazie a questa modifica, il PaintingComponent è capace di associare il tag <app-artist></app-artist> con la definizione fornita nel AristComponent.

E’ importante tenere a mente che, all’interno di un singolo modulo, l’ordine, in cui inseriamo le definizioni, potrebbe contare molto. Le dichiarazioni delle classi, in ES6 e TypeScript, non sono ‘hoisted’ e, quindi, referenziarle prima della loro dichiarazione genera errori.

Nel nostro esempio, PaintingComponent è definita prima di ArtistComponent, quindi, nella sua dichiarazione, il primo non può fare riferimento al secondo.

Per risolvere questo problema, possiamo definire ArtistComponent in un modulo separato ed importarlo utilizzando il loader dei moduli. In questo modo, il problema dell’ordine, diventa irrilevante.

app.module.ts
painting.component.ts
artist.component.ts

Adesso che abbiamo definito i nostri componenti, possiamo dedicarci al passaggio dei parametri di input. Questi, vanno dichiarati nel componente figlio, utilizzando il decorator Input, che viene importato dal modulo core di Angular ed invocato all’interno della classe.

@Input decorator

@Input è un data binding unidirezionale. Gli aggiornamenti dei dati si propagano verso il basso ed il padre non riceverà aggiornamenti, a meno che non venga richiesto in modo esplicito.

Adesso, dobbiamo passare il valore associato al tag del componente figlio al componente padre. Per questo esempio, vogliamo passare la proprietà name, dell’oggetto del PaintingComponent, nella proprietà artist, dell’oggetto ArtistComponent.
Per fare ciò, utilizziamo la notazione delle parentesi quadre nel tag. che specifica l’attributo da associare.

[author]=”name”

Adesso abbiamo passato, con successo, una proprietà verso il basso, da un componente padre ad un componente figlio.

Riassumendo quanto visto, possiamo dire che il processo prevede:

  • fornire il componente figlio al componente padre
  • configurare il componente figlio in modo che una sua proprietà sia associata ad un input esterno
  • fornire la proprietà definita come input all’interno del template del componente padre

%d bloggers like this: