Passer des données d'un parent à un enfant

HeroChildComponent a deux propriétés d'entrée, généralement ornées de décorations @Input.
Le second @Input alias le nom de proprirétré du composant enfant masterName en tant que master.

HeroParentComponent niche l'enfant HeroChildComponent dans un répéteur *ngFor, liant sa propriété string à l'alias master de l'enfant et l'instance du heroes de chaque itération à la propriété hero de l'enfant.
L'application en cours d'exécution affiche trois héros :



Tests E2E

Teste E2E que tous les enfants ont été instanciés et affichés comme prévu :

Interception des propriétés d'entrée modifiées avec un setter

Utilisez un outil de définition de propriété d'entrée pour intercepter et agir sur une valeur du parent.

Le créateur de la propriété d'entrée name de l'enfant NameChildComponent supprime les espaces d'un nom et remplace une valeur vide par du texte par défaut.

Voici le NameParentComponent démontrant les variations de nom, y compris un nom avec tous les espaces:

Tests E2E

Tests E2E du configurateur de propriété d'entrée avec des noms vides et non vides :

Interception des modifications de propriété d'entrée avec ngOnChanges()

Détectez et modifiez les valeurs des propriétés en entrée à l'aide de la méthode ngOnChanges().

VersionChildComponent détecte les modifications apportées aux propriétés major et minor et compose un message de journal indiquant ces modifications :

Le composant VersionParentComponent fournit les valeurs major et minor et lie les boutons aux méthodes qui les modifient.

Voici la sortie d'une séquence de boutons :


Tests E2E

Vérifiez que les deux propriétés d'entrée sont définies initialement et que les clics de bouton déclenchent les appels ngOnChanges et les valeurs attendus :

Le parent écoute un événement enfant

Le composant enfant expose une propriété EventEmitter avec laquelle il émet des événements lorsque quelque chose se passe. Le parent se lie à cette propriété d'événement et réagit à ces événements.

La propriété EventEmitter de l'enfant est une propriété de sortie, généralement ornée d'une décoration @Output, comme indiqué dans VoterComponent :

Un clic sur un bouton déclenche l'émission d'un true ou false.

Le parent VoteTakerComponent lie un gestionnaire d'événements appelé onVoted() qui répond à l'événement enfant $event payload et met à jour un compteur.

La structure passe l'argument d'événement représenté par $event à la méthode du gestionnaire, qui la traite :


Tests E2E

Vérifiez que les boutons "Agree" et "Disagree" sont mis à jour avec les compteurs appropriés :

Le parent interagit avec l'enfant via une variable locale

Un composant parent ne peut pas utiliser la liaison de données pour lire les propriétés enfants ou invoquer des méthodes enfants. Vous pouvez faire les deux en créant une variable de référence de modèle pour l'élément enfant, puis en référençant cette variable dans le modèle parent, comme illustré dans l'exemple suivant.

Ce qui suit est un enfant CountdownTimerComponent qui compte à plusieurs reprises jusqu'à zéro et lance une fusée. Il dispose de méthodes de démarrage et d'arrêt qui contrôlent l'horloge et affiche un message d'état de compte à rebours dans son propre modèle.

Le composant CountdownLocalVarParentComponent qui héberge le composant timer est le suivant :

Le composant parent ne peut pas lier les données aux méthodes de démarrage et d'arrêt de l'enfant ni à sa propriété secondes.

Vous pouvez placer une variable locale #timer sur la balise ‹countdown-timer› représentant le composant enfant. Cela vous donne une référence au composant enfant et la possibilité d'accéder à l'une de ses propriétés ou méthodes à partir du modèle parent.

Cet exemple relie les boutons parents au début et à la fin de l'enfant et utilise l'interpolation pour afficher la propriété secondes de l'enfant. Ici, nous voyons le parent et l'enfant travailler ensemble.


Tests E2E

Vérifiez que les secondes affichées dans le modèle parent correspondent à celles affichées dans le message d'état de l'enfant. Vérifiez également que le fait de cliquer sur le bouton "Arrêter" met le compte à rebours en pause:

Parent appelle un @ViewChild()

L'approche de la variable locale est simple et facile. Mais il est limité car le câblage parent-enfant doit être entièrement effectué dans le modèle parent. Le composant parent lui-même n'a pas accès à l'enfant. Vous ne pouvez pas utiliser la technique de variable locale si une instance de la classe de composant parent doit lire ou écrire des valeurs de composant enfant ou doit appeler des méthodes de composant enfant.

Lorsque la classe de composant parent nécessite ce type d'accès, injectez le composant enfant dans le parent en tant que ViewChild. L'exemple suivant illustre cette technique avec le même exemple de compte à rebours. Ni son apparence ni son comportement ne changeront. L'enfant CountdownTimerComponent est le même.

Voici le parent CountdownViewChildParentComponent :

Il faut un peu plus de travail pour obtenir la vue enfant dans la classe de composant parent. Tout d'abord, vous devez importer des références au décorateur ViewChild et AfterViewInit au crochet de cycle de vie. Ensuite, injectez l'enfant CountdownTimerComponent dans la propriété privée timerComponent via la décoration @ViewChild de la propriété.

La variable locale #timer est partie des métadonnées du composant. Liez plutôt les boutons aux propres méthodes start et stop du composant parent et présentez les secondes de graduation dans une interpolation autour de la seconds méthode du composant parent. Ces méthodes accèdent directement au composant de minuterie injecté.

Le crochet de cycle de vie ngAfterViewInit() est une ride importante. Le composant timer n'est disponible qu'après l'affichage de la vue parent par Angular, donc, il affiche les 0 secondes initialement.

Angular appelle ensuite le point d'ancrage du cycle de vie ngAfterViewInit auquel il est trop tard pour mettre à jour l'affichage des secondes du compte à rebours dans la vue parent. La règle de flux de données unidirectionnelle d'Angular empêche la mise à jour de la vue parent au cours du même cycle. L'application doit attendre un tour avant de pouvoir afficher les secondes.

Utilisez setTimeout() pour attendre un tick, puis révisez la méthode seconds() afin qu'elle prenne les valeurs futures du composant timer.

Le parent et les enfants communiquent via un service

Un composant parent et ses enfants partagent un service dont l'interface permet une communication bidirectionnelle.
La portée de l'instance de service est le composant parent et ses enfants. Les composants situés en dehors de cette sous-arborescence n'ont pas accès au service ni à leurs communications.

Ce MissionService connecte le composant MissionControlComponent à plusieurs enfants AstronautComponent.

MissionControlComponent fournit à la fois l'instance du service qu'elle partage avec ses enfants (via le tableau de métadonnées du fournisseur) et injecte cette instance en elle-même via son constructeur :

AstronautComponent injecte également le service dans son constructeur. Chaque astronaute est un enfant du composant MissionControl et reçoit par conséquent l'instance de service de son parent :

Le journal de l'historique montre que les messages circulent dans les deux sens entre le parent MissionControlComponent et les enfants AstronautComponent, facilités par le service :


Tests E2E

Testez les boutons du parent MissionControlComponent et des AstronautComponent enfants et vérifiez que l'historique répond aux attentes :