Communication correcte entre les composants angulaires

Introduction

Il y a quelques mois, j'avais une solution qui m'obligeait à appeler une méthode dans un composant enfant. Moi, ne sachant pas comment faire cela correctement, j'ai «piraté» une solution utilisant les entrées angulaires et les sorties . Bien que la solution ait fonctionné techniquement, elle n'a jamais semblé être la meilleure solution à utiliser. Après avoir communiqué avec certains collègues, j'ai découvert que ma solution ne suivait pas les «meilleures pratiques» pour la communication entre les composants angulaires. La meilleure façon d'utiliser les méthodes et les propriétés d'un composant enfant est d'utiliser le décorateur ViewChild ou ViewChildren .

Avant d'expliquer les différences entre les entrées / sorties angulaires et le ViewChild / ViewChildren cas d'utilisation de décorateur, je veux d'abord définir la relation entre un composant parent et un composant enfant:

 @Component ({
   sélecteur: 'parent',
   modèle: '
      

         
      
 
    »
})
classe d'exportation ParentComponent {

}

@Composant({
   sélecteur: 'enfant',
   templateUrl: "./child.component.html"
})
classe d'exportation ChildComponent {

} 

Une relation parent / enfant est définie par l’utilisation d’un composant (enfant) dans le modèle (parent) d’un autre composant. Comme vous pouvez le voir ci-dessus, le sélecteur du composant enfant est utilisé dans le modèle du composant parent.

Inputs / Outputs

 @Component ({
   sélecteur: 'parent',
   modèle: '
      

         
      
    »
})
classe d'exportation ParentComponent {
   parentArray: numéro [];
}

@Composant({
   sélecteur: 'enfant',
   templateUrl: "./child.component.html"
})
classe d'exportation ChildComponent {
   @Input () dataArray;
}

Les entrées / sorties angulaires doivent être prises en compte lorsque l'on souhaite partager des données entre l'enfant et le parent. Par exemple, s'il y a des données dans le parent que le composant enfant doit afficher, vous devez créer une entrée sur le composant enfant afin que le parent puisse transmettre des données. Comme vu ci-dessus, le parent passe par la variable «parentArray» à l'enfant, le rendant utilisable par le composant enfant.

The Future of Big Data

With some vous pouvez créer une plate-forme de données adaptée aux besoins de votre organisation et tirer le meilleur parti de votre capital de données.

Obtenir le guide

Dans le cas où il y a des données dans l'enfant que le parent doit utiliser , alors une sortie angulaire peut être utilisée.

 @Component ({
   sélecteur: 'parent',
   modèle: '
      

         
      
    »
})
classe d'exportation ParentComponent {
   childArray: numéro [];

   saveArray (tableau: nombre []) {
      this.childArray = tableau;
   }
}


@Composant({
   sélecteur: 'enfant',
   templateUrl: "./child.component.html"
})
classe d'exportation ChildComponent {
   @Output () événement: EventEmitter  = new EventEmitter ();

   sendArray (tableau: nombre []) {
      this.event.emit (tableau);
   }
} 

Lorsqu'une sortie Angular est combinée avec un Event Emitter le composant enfant peut envoyer un tableau au parent. Ce tableau est passé dans la fonction parent saveArray () où il est ensuite enregistré dans sa propre variable. Les entrées / sorties angulaires sont idéales pour envoyer des données, mais elles ne sont pas destinées à être utilisées lorsque vous essayez d'accéder aux propriétés et aux méthodes d'un enfant – c'est à cela que sert le décorateur de propriétés ViewChild / ViewChildren.

ViewChild / ViewChildren

 @ Composant({
  sélecteur: 'parent',
  modèle: `
    

      
    
   »
})
la classe d'exportation ParentComponent implémente AfterViewInit {
   @ViewChild ('childSelector', {static: false}) childComponent: ChildComponent

   ngAfterViewInit () {
      childComponent.foo ();
   }
}

@Composant({
   sélecteur: 'enfant',
   templateUrl: "./child.component.html"
})
classe d'exportation ChildComponent {
   toto () {
      // Faire quelque chose
   }
} 

ViewChild est un décorateur de propriétés qui sélectionne un composant enfant dans le modèle du composant parent. Comme indiqué dans l'exemple ci-dessus, le composant parent utilise le décorateur de propriété @ViewChild pour sélectionner le composant enfant (à l'aide du sélecteur «#childSelector») à partir de son modèle. Une fois le composant enfant sélectionné, il peut appeler l’une des méthodes publiques de l’enfant. Dans ce cas, le composant parent appelle directement la méthode foo () . Il est important de souligner que le paramètre {static: false} utilisé à l'intérieur du décorateur est un paramètre obligatoire à partir de Angular 9. Ce paramètre, s'il est vrai, permet au composant enfant d'être sélectionné pendant NgOnInit () .

ViewChildren est un décorateur de propriétés qui sélectionne plusieurs composants enfants dans le composant parent:

 @Component ({
   sélecteur: 'parent',
   modèle: `
      

         
      
      

         
      
    »
})
la classe d'exportation ParentComponent implémente AfterViewInit {
   @ViewChildren ('childSelector') childComponents: QueryList 
   
   ngAfterViewInit () {
      childComponents.foreach (enfant => {
         child.foo ();
      });
   }
}

@Composant({
   sélecteur: 'enfant',
   templateUrl: "./child.component.html"
})
export class ChildComponent {foo () {// Do Something}} 

Dans l'exemple ci-dessus, je suis capable de sélectionner plusieurs composants enfants comme QueryList <> . Cette liste est ensuite itérée pour appeler la fonction enfant foo () pour chaque composant enfant du composant parent.

Conclusion

Comme les composants angulaires peuvent communiquer de plusieurs manières, il est important de comprendre le but de la communication. Alors que les entrées / sorties angulaires doivent être utilisées lors du partage de données vers et depuis des composants enfants, ViewChild doit être utilisé lorsque vous essayez d'utiliser les propriétés et les méthodes du composant enfant directement dans le composant parent.

About the Author <! -: hsmith , Consultant technique associé ->

Hunter est consultant technique associé de l'unité commerciale Sitecore / Episerver de Perficient. Son travail chez Perficient a été principalement en tant que développeur d'applications Web Full-Stack et personnalisées. En tant que tel, il travaille avec des clients pour fournir des solutions techniques personnalisées utilisant Angular, React, C #, SQL, etc.

Plus d'informations de cet auteur