Comment faciliter la communication entre les composants frères et sœurs dans Angular 2 ?

Communication entre composants frères et sœurs dans Angular 2

Lorsque vous travaillez avec des composants frères et sœurs, il peut être nécessaire de communiquer des informations entre eux. Il existe plusieurs façons d'aborder cela avec Angular 2, notamment en utilisant un émetteur d'événements et @Input, en utilisant un service partagé avec des abonnements observables ou en tirant parti du système d'injection de dépendances hiérarchiques.

Event Emitter et @Input

Une option consiste à utiliser des émetteurs d'événements pour transmettre des données à un composant parent, puis à utiliser des décorateurs @Input sur le composant de détail pour recevoir les données. Cependant, cette approche peut être moins souhaitable si du code supplémentaire doit être exécuté lors de la sélection d'un élément.

Service partagé avec abonnements observables

Une autre méthode consiste à créer un service partagé qui fournit des abonnements observables. Lorsqu'un élément est cliqué, le service partagé peut être mis à jour, déclenchant les mises à jour requises dans les composants frères. Cette approche permet plus de flexibilité et de contrôle sur le processus de communication.

Injection de dépendances dans le composant parent

Mise à jour pour Angular rc.4 :

Pour Une solution plus simple consiste à utiliser le système d'injection de dépendances hiérarchique d'Angular 2. En fournissant le service partagé dans le composant parent, les deux composants enfants y ont accès via leurs constructeurs. Cela permet une communication directe entre les frères et sœurs, fournissant une méthode propre et efficace d'échange de données.

Pour illustrer cette approche :

• Créez un SharedService qui contient les données à partager.
• 🎜>
• Dans le composant parent, incluez le SharedService en tant que fournisseur et injectez-le dans le constructeur.
• Dans les composants frères, importez le SharedService et injectez-le dans le constructeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!