Angular - 5.8- Résumé des propriétés personnalisées et des liaisons d'événements

Faisons un rapide récapitulatif. La communication entre composants est une fonctionnalité clé d'Angular. Nous avons vu deux outils complémentaires : @Input pour rendre une propriété d'un composant assignable depuis l'extérieur, et @Output (couplé à EventEmitter) pour qu'un composant émette ses propres événements écoutables par son parent. Ce sont des fonctionnalités très importantes que nous utiliserons abondamment dans la section Livre de recettes : c'est ce qui permet de rendre une application réellement dynamique en faisant collaborer de nombreux composants.

Limites et alternative

Cette approche a toutefois une limite : si deux composants éloignés dans l'arbre (par exemple côte à côte mais sans lien parent-enfant direct) doivent dialoguer, il faut faire remonter un événement jusqu'à l'ancêtre commun via une chaîne d' @Output, puis redescendre la donnée via une chaîne d'@Input. Ces chaînes peuvent devenir compliquées et fragiles à mesure que l'application grandit. Pour ces cas-là, la section sur les services présentera une autre approche, basée sur l'injection de dépendances Angular. Ce n'est pas une « meilleure » approche dans l'absolu : juste un outil mieux adapté à un autre cas d'usage.

• communication parent → enfant : @Input ;
• communication enfant → parent : @Output + EventEmitter ;
• communication entre composants distants : un service Angular partagé (à venir).