IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

Angular 1.5 - Communication inter composants fils et Bindings


Sujet :

AngularJS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut Angular 1.5 - Communication inter composants fils et Bindings
    Bonjour,

    Je travaille actuellement sur un projet et je me retrouve dans la situation suivante :

    J'affiche dans ma page web un composant père. Ce dernier a deux composants fils.
    Je souhaiterais communiquer entre mes deux composants fils, en effet l'un des composants fils est dépendant de ce que l'utilisateur à entré dans le premier composant fils pour afficher correctement des informations.

    Après plusieurs recherches, j'ai tenté l'utilisation de bindings en faisant passer l'information à travers mon composant parent ( j'ai tenté d'utiliser un binding "=" sur mon composant fils pour que une fois la donnée modifiée elle le soit aussi dans mon composant père). Cela n'a rien donné

    Comme vous l'avez surement deviné, je suis plutôt débutant sur Angular, notamment sur l'usage des components que nous venez a peine d'intégrer dans le projet. J’aimerais donc avoir dans un premier temps vos avis sur quels moyens utiliser pour répondre à mon besoin (Est-il possible de communiquer directement entre les deux composants fils sans passer par le père ? Si je dois passer par le père, dois-je utiliser le bindings "=" ou le "&" avec le callback ? ).


    Je suis à disposition pour répondre à vos questions si je n'ai pas été clair

    Cordialement,
    JCTurboo

  2. #2
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Citation Envoyé par JCTurboo Voir le message
    J'affiche dans ma page web un composant père. Ce dernier a deux composants fils.
    Je souhaiterais communiquer entre mes deux composants fils, en effet l'un des composants fils est dépendant de ce que l'utilisateur à entré dans le premier composant fils pour afficher correctement des informations.

    Après plusieurs recherches, j'ai tenté l'utilisation de bindings en faisant passer l'information à travers mon composant parent ( j'ai tenté d'utiliser un binding "=" sur mon composant fils pour que une fois la donnée modifiée elle le soit aussi dans mon composant père). Cela n'a rien donné
    Pour les bindings, c'est probablement parce que tu passes en paramètre des primitives au lieu de passer un littéral. Si tu passes un littéral il sera manipulé par référence, donc l'instance dans tes composants fils sera identique.

    Mais le problème des bindings c'est que ça modifie le contrat d'interface de ton composant, et lorsque tu commences à avoir un niveau de plus dans ta hiérarchie, les composants du milieu se retrouvent à servir de passe plat pour des composants plus bas dans la hiérarchie. Ils ont donc des parties de leur contrat d'interface qui ne les concernent absolument pas. C'est mal.

    La meilleure pratique reste pour moi de passer par un service qui va porter les données. L'idéal c'est d'avoir RxJS dans le projet pour pouvoir utiliser les observables (cf exemple doc Angular2+), sinon il suffit de faire porter les données à l'instance du service puisque ces derniers sont des singletons. L'inconvénient c'est qu'il ne faut pas oublier de réinitialiser les valeurs portées par le service lorsque la vue contentant ta famille de composants est affichée.

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut
    Tout d'abord merci pour cette réponse rapide !

    Concernant l'utilisation de services pour la communication des infos, je vais proposer cela à ceux qui sont en charges de l'architecture du projet.

    Je dois cependant en attendant me contenter des bindings
    J'ai tenté de comprendre ce que vous m'avez dit concernant les paramètres primitifs et littéraux mais je pense avoir échoué... haha
    Je comprends dans l'idée qu'il faille passer une référence mais je ne vois pas comment.. ni où ? :/

    Voici comment s'organise mon code (J'ai simplement mis ce qui concerne la partie binding):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    ComposantFilsComponent.js :
     
      bindings: {
        foo: '=?'
      },
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    ComposantFils.html
                <input type="text"  ng-model="boo">
                <button href="" ng-click="$ctrl.function(boo)">Rechercher</button>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    ComposantFilsController : 
     
    this.function= function(boo){
         this.foo=boo;
    };
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    ComposantPere.html
     
          <case-details case="$ctrl.foo"></case-details>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    ComposantPereController.js
        this.foo= 'Hello';



    Excusez-moi pour le côté barbare, j'ai tenté d'adapter pour le rendre le plus explicite possible mais voici ce que je fais. Lorsque je clique sur mon bouton, la fonction "function" est bien appelée et la valeur de foo dans le composantFils est bien valorisé à boo. Cependant du côté de mon composantParent, il ne se "met pas à jour" et garde l'ancienne valeur ("Hello").

    Je suis vraiment désolé de ne pas avoir réussi a comprendre directement votre solution et de vous exposer mon code d'une manière aussi moche mais je ne vois pas vraiment comment faire sinon
    Merci beaucoup en tout cas et bonne journée.
    Cordialement,
    JCTurboo

  4. #4
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut
    Autant pour moi, l'erreur venait principalement du fait que je suis un abruti (faute d'étourderies, je passais mon paramètre à un autre composant...)


    Merci !

  5. #5
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    C'est très simple, au lieu de faire ça this.foo = 'Hello'; dans ton composant père, tu fais ça : this.foo = { bar: 'Hello' };.

    Et dans le js de ton fils :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    this.function= function(boo){
         this.foo.bar = boo;
    };
    Le reste n'a pas besoin de changer.

    Concernant l'utilisation de services pour la communication des infos, je vais proposer cela à ceux qui sont en charges de l'architecture du projet.
    Du coup si tu as des gens au dessus qui gèrent l'archi (plusieurs ?!?) leur as-tu posé la question ? Ils relisent ton code ? Ils t'ont donné des bonnes pratiques à suivre ? Ils t'ont fourni un projet starter avec des exemples pour démarrer ?

  6. #6
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2016
    Messages : 10
    Par défaut
    Yes j'avais finalement réussi a le comprendre Merci encore pour la solution !

    C'est assez spécial haha Nous sommes dans un grand projet et nous développons une nouvelle IHM.
    C'est surtout un archi et un dev expérimenté qui se charge de l'architecture et des outils utilisés selon leurs envies et les besoins
    On utilise un webstarter pack gulp qui est assez répandu pour Angular1.5.

    Ils ne relisent pas mon code dans le sens où personne n'étant encore à l'aise avec les component, nous découvrons et codons un peu "ensemble" haha, concernant les bonnes pratiques on se fie à celles que nous avions pour les versions antérieures d'angular et de ce que l'on peut glané comme info sur le net.

    Concernant lees services. Ils ne sont pas très chauds, nous utilisons des services pour que notre IHM communique avec d'autres composants mais notre IHM sera assez basique donc il ne devrait pas y avoir plus de 2 niveaux hiérarchiques, pour cette raison ils préfèrent ne pas les utiliser pour de la communication inter-composants, du moins pour le moment.


    JCTurboo

  7. #7
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Par contre il faut que je précise un truc, il manquait une information dans ton post initial, il ne s'agit pas de partager des données, mais de partager le résultat d'un évènement utilisateur (le clic sur le bouton rechercher).

    C'est très différent. Dans ce cas de figure, il est recommandé de binder non pas la valeur mais la fonction du clic. Tu comprends bien que ton composant contenant le bouton ne doit pas implémenter le comportement. C'est au composant container de ta vue de gérer ça. Donc il faut lui passer la fonction à exécuter au clic et pas la valeur du champ rechercher.

    C'est assez bien expliqué dans le developper guide AngularJS de la 1.5.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [ActionListner] Communication inter composant
    Par seeme dans le forum Agents de placement/Fenêtres
    Réponses: 0
    Dernier message: 21/12/2009, 11h25
  2. [windows] Communication inter-processus
    Par litbos dans le forum Windows
    Réponses: 6
    Dernier message: 16/01/2007, 09h13
  3. Communication inter-fenêtre
    Par NeoMan dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 01/08/2005, 14h35
  4. communication inter-processus
    Par benoit70 dans le forum MFC
    Réponses: 1
    Dernier message: 14/04/2005, 09h55
  5. [MFC] communication inter exe
    Par Kevgeii dans le forum MFC
    Réponses: 2
    Dernier message: 06/01/2004, 16h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo