Communication correcte entre les composants angulaires

NRZ.Digital
0 0

introduction

Il y a quelques mois, j’avais une solution qui m’obligeait à appeler une méthode dans un composant enfant. Je ne sais pas comment faire cela correctement, j’ai «piraté» une solution à l’aide d’Angular contributions 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 VoirEnfant ou VoirEnfants décorateur.

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

@Component({ 
   selector: 'parent', 
   template: ' 
      <div>
         <child></child>
      </div> 
   '
}) 
export class ParentComponent { 

}

@Component({
   selector: 'child',
   templateUrl: './child.component.html'
})
export class ChildComponent {

}

Une relation parent / enfant est définie par un composant (enfant) utilisé 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.

Entrées / Sorties

@Component({
   selector: 'parent',
   template: '
      <div>
         <child [dataArray]="parentArray"></child>
      </div>
   '
})
export class ParentComponent {
   parentArray: number[];
}

@Component({
   selector: 'child',
   templateUrl: './child.component.html'
})
export class ChildComponent {
   @Input() dataArray;
}

Angulaire entrées / sorties devrait être pris en compte lorsque le désir est de 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» dans l’enfant, le rendant utilisable par le composant enfant.

Data Intelligence - L'avenir du Big Data
L’avenir du Big Data

Avec quelques conseils, 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.

Obtenez le guide

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

@Component({
   selector: 'parent',
   template: '
      <div>
         <child (childArray)="saveArray($event)"></child>
      </div>
   '
})
export class ParentComponent {
   childArray: number[];

   saveArray(array: number[]) {
      this.childArray = array;
   }
}


@Component({
   selector: 'child',
   templateUrl: './child.component.html'
})
export class ChildComponent {
   @Output() event: EventEmitter<any> = new EventEmitter();

   sendArray(array: number[]) {
      this.event.emit(array);
   }
}

Lorsqu’une sortie angulaire est combinée avec un Émetteur d’événements, 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.

VoirEnfant / VoirEnfants

@Component({
  selector: 'parent',
  template: `
    <div>
      <child #childSelector></child>
    </div>
  `
})
export class ParentComponent implements AfterViewInit {
   @ViewChild('childSelector', { static: false }) childComponent: ChildComponent

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

@Component({
   selector: 'child',
   templateUrl: './child.component.html'
})
export class ChildComponent {
   foo() {
      // Do Something
   }
}

VoirEnfant est un décorateur de propriétés qui sélectionne un composant enfant dans le modèle du composant parent. Comme vu dans l’exemple ci-dessus, le composant parent utilise le @ViewChild property decorator afin de sélectionner le composant enfant (à l’aide du sélecteur ‘#childSelector’) à partir de son modèle. Une fois que le composant enfant est sélectionné, il peut appeler n’importe laquelle des méthodes publiques de l’enfant. Dans ce cas, le composant parent appelle le foo() méthode directement. 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().

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

@Component({ 
   selector: 'parent', 
   template: `
      <div>
         <child #childSelector id="1"></child>
      </div>
      <div>
         <child #childSelector id="2"></child>
      </div>
   ` 
}) 
export class ParentComponent implements AfterViewInit { 
   @ViewChildren('childSelector') childComponents: QueryList<ChildComponent> 
   
   ngAfterViewInit() { 
      childComponents.foreach(child => {
         child.foo();
      }); 
   } 
} 

@Component({ 
   selector: 'child', 
   templateUrl: './child.component.html' 
}) 
export class ChildComponent { foo() { // Do Something } }

Dans l’exemple ci-dessus, je peux sélectionner plusieurs composants enfants en tant que QueryList<>. Cette liste est ensuite itérée pour appeler la fonction enfant foo() pour chaque composant enfant du composant parent.

Conclusion

Dans la mesure où 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 à partir de 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.

A propos de l’auteur

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. À ce titre, il travaille avec les clients pour fournir des solutions techniques personnalisées utilisant Angular, React, C #, SQL, etc.

Plus de cet auteur


Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Laisser un commentaire

Next Post

Comment communiquer plus efficacement la valeur grâce à la conception collatérale

Imaginez un monde sans design créatif. Ce qui me vient à l’esprit? Le don du gab? Bouche à oreille? Un argumentaire de vente périmé? Avouons-le, créer une marque et une notoriété de marque uniquement autour du bouche-à-oreille ou des arguments de vente pour influencer les choix serait vraiment difficile. C’est […]

Abonnez-vous maintenant