Communication entre les composants Angular

Name: Communication entre les composants Angular
Author: Michaela Ochnich

Preview the first lesson free — get full access to all 7 lessons.

Cours : à la demande

Cette leçon vous montrera comment utiliser la propriété input pour envoyer des informations d'un parent à un composant enfant. Alors voilà, j'ai une application de démarrage qui a été généré à l'aide de la CLI angulaire. Et d'abord, je vais générer un composant parent et un composant enfant pour passer des informations entre. Et ici, je viens de sauter la génération du fichier de test et le fichier CSS séparé. Et puis dans le modèle de composant d'application racine, Je vais supprimer tout le code de démarrage, puis ajoutez ce composant parent. Alors maintenant que c'est mis en place, Je vais ouvrir le modèle parent puis incorporer dans celui-ci le composant enfant. Alors maintenant, ce composant enfant est dans le composant parent, Je vais ouvrir la classe de composant enfant, puis je vais importer le décorateur d'entrée de la bibliothèque de base Angular. Ainsi, les propriétés d'entrée peuvent être utilisées pour envoyer des informations d'un composant parent à un composant enfant, et il garde ces informations synchronisées. Ensuite, je vais déclarer une propriété d'entrée dans la classe de composant enfant. Donc, le décorateur d'entrée est ce qui marque le message comme propriété d'entrée, et une propriété d'entrée est liée à une propriété dans le Dom. Dans ce cas, il sera lié dans le composant parent. Lorsque cette propriété dans le Dom du parent est mise à jour, Angular mettra à jour cette propriété d'entrée dans la classe de composant enfant également, c'est ce qui maintient ces données synchronisées. Donc ici, j'ai la propriété définie avec un opérateur d'affectation défini puisque cette propriété va recevoir sa valeur initiale du parent. Cependant, vous pouvez également définir une valeur par défaut pour la propriété comme ça. Alors voilà si ce composant n'a pas été initialisé de quelque manière que ce soit sans que la propriété d'entrée soit liée dans le composant parent, alors cette valeur de message serait par défaut bienvenue. Et donc ensuite j'afficherai ce message dans le modèle de composant enfant. Alors maintenant que le composant enfant est configuré pour recevoir cette valeur d'entrée, le parent doit transmettre cette valeur à l'enfant. Donc d'abord dans la classe de composant parent, Je vais définir un message à faire passer. Ensuite, dans le modèle parent, Je vais lier cela à la propriété d'entrée des composants enfants. Donc ici, j'utilise la liaison de propriété, qui se fait avec les crochets pour lier la variable de message parent à la propriété d'entrée de message qui a été créé dans le composant enfant. Et puis en regardant cela dans le navigateur, vous pouvez voir le message qui a été défini dans le composant parent est transmis et affiché dans le composant enfant. Vous pouvez donc parfois vouloir vous référer à cette valeur d'entrée par un nom différent dans la classe de composant enfant. Dans ces cas, vous pouvez créer un alias pour la propriété d'entrée. Revenons donc à la classe de composant enfant, Je vais renommer cette propriété en message parent. Et puis dans le décorateur d'entrée, passer le nom de la propriété que le composant parent est contraignant à. Dans ce cas, c'est le message. Et maintenant que le composant enfant sait cette propriété d'entrée comme message parent, le modèle doit être mis à jour. Et puis l'afficher dans le navigateur vous pouvez le voir, ce message est toujours en cours de transmission du parent à l'enfant. C'est tout pour cette leçon sur la façon d'utiliser les propriétés d'entrée pour communiquer du parent au composant enfant. Et dans la prochaine leçon, vous apprendrez à intercepter tout changement de valeur d'entrée en utilisant des setters et des getters.

Intermédiaire Fournisseur : Michaela Ochnich 7 leçons · 36m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce chapitre présente différentes façons d’envoyer des informations entre les composants, en fonction de leur relation les uns avec les autres. Vous apprendrez à transmettre des informations de parent à enfant, d’enfant à parent ou dans les deux sens entre deux composants. Vous apprendrez également à intercepter certains de ces changements de données et à les modifier si nécessaire avant de les utiliser dans le composant.

Ce que vous allez apprendre

Envoyer des données d'un composant parent à un composant enfant en utilisant Input, Setters et Getters, et OnChanges
Envoyer des données d'un composant enfant à un composant parent en utilisant Output et EventEmitter
Accéder à un composant enfant via le modèle ou la classe du parent en utilisant ViewChild et des variables de référence
Communiquer de manière bidirectionnelle entre deux composants
Intercepter les modifications de données et les modifier avant qu'elles ne soient utilisées dans le composant
Partager des données entre les composants en utilisant un service partagé

Points clés à retenir

La façon dont vous communiquez entre les composants Angular dépend de leur relation les uns avec les autres.
Les informations peuvent être transmises du parent à l'enfant, de l'enfant au parent, ou dans les deux sens entre deux composants.
Certaines modifications de données peuvent être interceptées et modifiées avant d'être utilisées dans le composant.
Un parent peut accéder à un composant enfant via le modèle ou la classe du parent.
Un service partagé est une approche pour communiquer entre les composants.

Foire aux questions

Que couvre ce cours ?

Ce chapitre démontre différentes manières d'envoyer des informations entre les composants Angular en fonction de leur relation, y compris la transmission de données du parent à l'enfant, de l'enfant au parent, ou de manière bidirectionnelle entre deux composants, et l'interception des modifications de données pour les modifier avant utilisation.

Qu'est-ce que je vais apprendre à faire dans ce cours ?

Vous apprendrez comment envoyer des données d'un composant enfant à un composant parent, envoyer des données d'un composant parent à un composant enfant, accéder à un composant enfant via le modèle ou la classe du parent, et communiquer de manière bidirectionnelle entre deux composants.

Quels sujets ou techniques sont enseignés dans les leçons ?

Les leçons couvrent Input, Setters et Getters, OnChanges, Output et EventEmitter, ViewChild, Shared Service et les variables de référence.

Quelles compétences ce cours m'aide-t-il à développer ?

Il développe des compétences en composants Angular (Angular Components), diagrammes de communication (Communication Diagrams), diagrammes de composants (Component Diagram), bibliothèques de composants (Component Libraries), composants connectés (Connected Components) et composants HTML (HTML Components).

Puis-je apprendre à modifier les données avant qu'un composant ne les utilise ?

Oui. Le cours enseigne comment intercepter certaines de ces modifications de données et les modifier si nécessaire avant utilisation dans le composant.