web-dev-qa-db-fra.com

Comment puis-je communiquer entre deux composants enfants en angulaire?

Je suis très nouveau dans angular 2. J'ai un problème pour communiquer entre deux composants. Lorsque j'ai une disposition avec un parent et certains composants enfants, il est facile de définir des variables des composants enfants avec l'annotation @Input.

Mais maintenant, j'ai une disposition d'un composant parent (qui est principalement pour la disposition) et deux composants enfants:

example Layout

Le composant enfant 2 possède un tas de boutons, ce qui ne crée qu'un simple message. Maintenant, je veux afficher ce message dans le composant enfant un.

Comment le résoudre? Merci d'avance

angularcomponents
13
Surras

Vous pouvez utiliser @ViewChild et @Output pour mettre à jour les propriétés du composant enfant.

Vous pouvez également utiliser @Input au lieu de @ViewChild.

L'approche suggérée par seidme fonctionnera également très bien. Cela dépend simplement de votre cas d'utilisation.

Exemple utilisant @ViewChild et @Output: https://plnkr.co/edit/r4KjoxLCFqkGzE1OkaQc?p=preview

Exemple utilisant @Input et @Outputhttps://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview

8
JSNinja

A côté des solutions utilisant le @Input/@Output et un composant parent comme "pont", une manière courante serait également d'introduire un service partagé. Le service doit être fourni dans un composant parent afin que les enfants puissent partager une seule instance du service ( Comment créer un service singleton dans Angular 2? ).

Exemple de base utilisant BehaviorSubject en tant que délégué :

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

Composant enfant 1:

export class ChildComponent1 {

    constructor(private _sharedService: SharedService) { }

    sendMessage(): void {
        this._sharedService.messageSource.next('Hello from child 1!');
    }
}

Composant enfant 2:

export class ChildComponent2 {

    constructor(private _sharedService: SharedService) {
        this._sharedService.messageSource.subscribe((message: string) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
     }
}

Voir également cet article: Angular2 - Interaction entre les composants utilisant un service

15
Seid Mehmedovic

Un moyen simple consiste à définir une sortie avec @Output dans votre composant enfant2 en tant qu'émetteur d'événements et à émettre un événement avec le message transmis en tant que données lorsque vous cliquez sur un bouton. Ensuite, écoutez cet événement dans votre composant parent et mettez à jour une propriété définie comme entrée de votre composant enfant1 lorsque l'événement se produit.

L'image ci-dessous est un exemple qui montre clairement le mécanisme

Component-IO

10
Faly

Vous pouvez utiliser des variables de modèle pour référencer les frères et sœurs:

<child1 #child1></child1>
<child2 (someOutput)="child1.doSomething($event)"></child2>
9
Günter Zöchbauer