Je suis assez nouveau en angulaire et j'ai un doute sur ce qui pourrait être un bon moyen de permettre de comuniquer deux composantes dans ma demande. Je sais qu'il existe différentes stratégies et je veux comprendre ce qui pourrait être un bon choix pour mon cas particulier.
Fondamentalement, j'ai cette situation:
Comme vous pouvez le voir dans la capture d'écran précédente, j'ai deux composants:
Donc, Fondamentalement, lorsque je clique sur l'icône de l'entonnoir dans le composant 1 (la liste des personnes), la méthode suivante dans ce code TholyScript Compoenent sera exécutée:
onclickfilter (personne, événement) { console.log ("Onclickfilter commence. Personne est:", personne); }
L'objet personne est celui contenant les informations que je dois envoyer au composant 2 (composant de calendrier à droite).
Je lisais ici comment autoriser les composants COMUNICATION:
Et aussi ici: https://angular.io/guide/component-interaction
Mais je ne sais pas quel est le meilleur choix. En particulier dans la documentation angulaire officielle, je peux trouver le moyen de passer de parents à l'enfant (mais ici, ces composants sont des frères et sœurs).
Une idée est d'émettre un événement dans le composant 1 (la liste des personnes) et de le souscrire dans le composant 2 (le calendrier) mais je ne suis pas sûr que si cela est trop fortement serré.
Quelle peut être une solution intelligente dans ce cas d'utilisation?
le premier
3 Réponses :
Utilisez l'entrée Dans votre cas, c'est certainement le parent et le composant2 est le parent et le composant2 Enfant. P> Dans votre fichier Component1.ts, définissez la propriété qui doit transmettre les données au composant 2. Dans mon cas, disons dans votre fichier composent2.ts Définissez une propriété avec @input () code> décorateur. Cette propriété obtiendra le détail de composant1. P> () code> décorateur pour transmettre les données. Dans votre cas qui envoie les données à un autre composant est le parent. Qui reçoit les données est enfant. Lorsque vous devez envoyer les données de parent à l'enfant, nous utilisons @input () code>. Lorsque nous devons envoyer les données de l'enfant au parent, nous utilisons @outout () code> et EventMitter code>. persondetails code>. Et dans votre méthode ONCLICK effectue vos opérations et attribuez le détail à la propriété personails code>. P> <component2 [personDetailsInput]="personDetails"></component2>
mmm peut-être que je manque quelque chose. Donc, le parent signifie seulement "qui envoie les données". D'après ce que j'ai compris, le parent est le "composant parent" qui signifie que c'est le composant contenant un sous-composant ... je me trompe? Et pourquoi de cette façon est de mieux respecter d'émettre un événement de mon composant 1 et de vous abonner à cet événement dans mon composant 2?
@Andreanobili, «parent signifie seulement« qui envoie les données »'' '' '' cette déclaration est fausse. Il n'est qu'aplicable dans votre cas. Component1 envoie le composant de données2. Un composant parent est un composant qui a une portée plus large et un composant enfant est un composant en dehors de cette portée mais pas tout. Événement émettant également l'envoi des données mais de l'enfant au parent. De manière angulaire, il y a 2 façons appropriées d'envoyer des données. P à c: @input (). C à P: @Output (), EventMitter.
On ne sait pas pour moi exactement comment votre application est configurée. Je vois une vision de liste des gens et une vue de calendrier, et vous les appelez "frères et sœurs", mais ce n'est pas tout à fait clair pour moi comment la navigation fonctionne. Voici les options que je vois.
Si la vue de la liste et le calendrier apparaissent à la fois à l'écran, ils sont en fait des frères et sœurs et les deux seraient des enfants d'une composante parent. Donc, les clics sur l'enfant A peuvent être transmis au parent via Emit, puis retourné à l'enfant B via ViewChild.
En cliquant sur un utilisateur dans la liste de la liste, mai "Route" sur la vue du calendrier, auquel cas utiliser QueryParams fonctionnerait bien pour réussir l'ID utilisateur au calendrier
En cliquant sur un utilisateur peut afficher une pop up modale, du calendrier, ce qui signifie que vous pouvez passer des données directement à partir de la vue A pour afficher B à l'aide de ViewChild. Ou même sauter la fenêtre et transmettre des données directement à l'aide des balises HTML.
Le cas est absolument le cas 1 que vous avez répertorié
Voici un certain code que j'ai donné précédemment. Dans cet exemple, le composant A est le parent et le B & C sont les enfants / frères et soeurs. Stackoverflow.com/questions/62479710/...
Dans la situation Lorsque vous souhaitez transmettre les données entre deux composantes qui ne sont pas dans la relation parent-enfant - la meilleure solution consisterait à utiliser un service et un concept de Comment l'utilisons-nous? premier, Créez alors vous devez injecter Ce service dans les deux composants que vous souhaitez partager les données entre. Un côté continuera à envoyer les données et l'autre côté écoutera (en vous abonnant). sujet . data.service.ts
écouteur-sodibling.component.ts expéditeur-sobling.component.ts < / code>