Nous avons une approche où nous avons deux pages : une page qui liste, une page qui affiche. Or, nous pouvons aussi appeler un composant dans un autre.
Allons-y profitons de cette puissance dans Angular, et vive le DRY !
S’inspirer du premier composant
Initialement, nous avons un composant qui est appelé dans la page principale, et unique du projet (le index.html).
Qu’y trouve-t-on ?
<app-root></app-root>
App-Root est le selector qui a été défini dans notre Component principal AppComponent.
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘Tour of heroes’;
}
Appeler un selector de composant dans une Vue d’un composant
Et si cette possibilité pour le AppComponent, on pouvait l’utiliser pour toutes les vues ?
Angular y a pensé, et c’est possible !
Nous avons créé un composant dédié à l’affichage d’un Element.
Reprenons l’exemple proposé par Angula sur leur tutorial en ligne.
@Component({
selector: ‘app-hero-detail’,
templateUrl: ‘./hero-detail.component.html’,
styleUrls: [‘./hero-detail.component.css’]
})
export class HeroDetailComponent implements OnInit {
hero: Hero;
constructor() { }
ngOnInit() {
}
}
Ici, le selector est ‘app-hero-detail’.
Donc, on va pouvoir appeler ce selector dans une autre vue !
<app-hero-detail></app-hero-detail>
Or ce composant doit connaître le Hero sélectionné pour afficher la bonne Vue.
@Input et binding depuis la Vue
Pour permettre ce fonctionnement, nous allons utiliser un autre decorateur prévu par Angular : @Input.
Pour décorer notre attribut de classe hero :
@Input() hero: Hero;
Ce qui va nous permettre d’affecter l’attribut Hero, directement depuis la Vue :
<app-hero-detail [hero]= »selectedHero »></app-hero-detail>
NOTE : Vous avez remarquez les crochets, qui indique un lien entre le Composant, et la Vue : la notion de Binding.
Nous les avons déjà utilisé pour récupérer une classe css depuis le Composant.