- Learn
- Guida Angular 2
- Passare dati ad un componente
Passare dati ad un componente
Gli esempi di componenti che abbiamo visto finora sono piuttosto statici, cioè le informazioni visualizzate non cambiano durante l’esecuzione dell’applicazione. Questo tipo di componente non è poi così interessante, in fondo. Sarebbe invece interessante vedere come un componente visualizzi dati che vengono passati dall’esterno, da un altro componente ad esempio, e che quindi possono potenzialmente variare durante l’esecuzione dell’applicazione.
Modifichiamo il codice scritto in precedenza per ottenere questa implementazione. Faremo in modo che il root component della nostra applicazione definisca il contenuto dell’articolo e lo passi all’ArticoloComponent
per visualizzarlo.
Quindi per prima cosa aggiungiamo una proprietà myArticolo
al root component e la inizializziamo nel suo costruttore:
import { Component} from '@angular/core';
import { ArticoloComponent } from './articolo';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
myArticolo;
constructor() {
this.myArticolo = {
titolo: "Creare componenti Angular 2",
autore: "Mario Rossi",
testo: "Creare componenti con Angular 2 è molto semplice."
};
}
}
Modifichiamo quindi il codice di ArticoloComponent
eliminando l’inizializzazione dei dati dell’articolo che abbiamo ora spostato nel root component
:
import { Component, Input} from '@angular/core';
import { Articolo } from './articolo'
@Component({
selector: 'articolo',
templateUrl: 'articolo.component.html',
styleUrls: ['articolo.component.css']
})
export class ArticoloComponent implements OnInit {
@Input() articolo: Articolo;
constructor() {}
}
Oltre all’assenza dell’inizializzazione dei dati dell’articolo, possiamo notare un nuovo decoratore @Input
a fianco della dichiarazione della proprietà articolo
. Questo decoratore, opportunamente importato dal modulo core
di Angular, indica che l’assegnamento di valori a questa proprietà può avvenire dall’esterno del componente. In altre parole, stiamo informando Angular che articolo
è una proprietà di input, cioè una proprietà tramite cui altri componenti possono passare dati.
Vediamo allora come il root component può passare i dati dell’articolo al componente ArticoloComponent
. È sufficiente modificare il markup del suo template nel seguente modo:
<h1>
{{title}}
</h1>
<articolo [articolo]="myArticolo"></articolo>
Come possiamo vedere, l’aver dichiarato la proprietà articolo
del componente ArticoloComponent
come proprietà di input, ci consente di poterla utilizzare come attributo speciale nel markup del componente.
Un attributo tra parentesi quadre, infatti, indica ad Angular che intendiamo assegnare un valore all’omonima proprietà del componente.
Se vuoi aggiornamenti su AngularJS, JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Unire file video con VirtualDub
VirtualDub consente di unire velocemente due file video, semplicemente attraverso il comando apposito per l’aggiunta di segmenti video.