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

Angular Discussion :

Appeler une méthode du parent dans un enfant


Sujet :

Angular

  1. #1
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 458
    Points : 271
    Points
    271
    Par défaut Appeler une méthode du parent dans un enfant
    Bonjour,

    Petite question en passant, je tombe sur ce tuto qui dit qu'il faut utiliser un @Output() pour faire cela. Du coup j'aurais fait l'inverse :utiliser un Input() vu que ce décorateur sert de base à la communication du parent vers l'enfant. Ai-je bien tout compris ?
    https://medium.com/@sohailnazar4/ang...t-5dcccdc771d9

    Merci

  2. #2
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    549
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 549
    Points : 788
    Points
    788
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    parent                              enfant
          -------------------->     @Input
          <-------------------      @Output

    * 'toto' est envoyé du parent à l'enfant et vice versa :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    parent                                                            enfant
          []="'toto'"-------------------->                       @Input
                       <---------------- event.emit('toto')    @Output
    ai je répondu à ta question ?

  3. #3
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 458
    Points : 271
    Points
    271
    Par défaut
    C'est le fait de voirun évènement émis dans l'enfant (le 'event') et le recours à @Output() qui m' a troublé.
    Je pensais que j'aurais pu importer ma méthode du parent à l'enfant avec un simple @Input().

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    549
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 549
    Points : 788
    Points
    788
    Par défaut
    et oui !

    * il y a une explication :

    Angular construit la page dans ce sens : des composants supérieurs (parents) aux composants inférieurs (enfants)
    donc de haut en bas il peut transmettre simplement des valeurs dans des inputs

    comme ça prendrait trop de temps de remonter de la même manière donc Angular propose comme astuce d'utiliser un évènement pour l'envoyer au parent.

    * après comme tu le sais, on peut communiquer dans tous les sens : vers le haut , le bas, au même niveau .. via des variables ou observables dans des services

    * autre chose :

    disons que nous avons des composants imbriqués les uns dans les autres :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <app-comp1 [text]="'aaaaa'"></app-comp1>
           <app-comp2 [text]="text"></app-comp2>
                   <app-comp3 [text]="text"></app-comp3>

    donc les 3 composants vont afficher : aaaaa

    si on modifie app-comp2 avec text = 'bbbb'
    seul comp2 et comp3 afficherons 'bbbbb'

    parceque la détection de changement (vu que l'on modifie la variable : text) dans app-comp2 se fait à partir du composant vers les composants du bas

    donc comp2 et comp3 afficherons : 'bbbbb'
    comp1: 'aaaaa'


    c'est pour info, à savoir !

  5. #5
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 458
    Points : 271
    Points
    271
    Par défaut
    Encore une brillante explication de ta part : merci !!

  6. #6
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 458
    Points : 271
    Points
    271
    Par défaut
    Je reviens encore ! car du coup comment tu fais lorsque tu dois appeler une de tes méthodes dans un composant enfant, lorsque la méthode en question possède des appels d'autres méthdes. Car je suis entrain de déménager de la logique en pagaille.

    Autre question: lorsques tu utilises un composant dans plusieurs autres enfants est-ce qu'il vaut mieux raptatrier un max de logique vers les enfants, ou en conserver un maximum dans le compo parent, moi je pars du principe de déménager à minima la logique du compo parent dans les enfants.

  7. #7
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    549
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 549
    Points : 788
    Points
    788
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    // quand la valeur d'un @Input est modifié, la fonction ngOnchange est appelé :
    ngOnChange(.......) {             
     
     
     
    }

  8. #8
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 458
    Points : 271
    Points
    271
    Par défaut
    ok merci, c'est l'enfer le refacto...

  9. #9
    Membre actif
    Homme Profil pro
    OoW
    Inscrit en
    juin 2019
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : juin 2019
    Messages : 63
    Points : 226
    Points
    226
    Par défaut
    \ô/
    il n'est pas inutile de se plonger dans la documentation officielle Angular qui me semble être plus clair que le tuto dont tu parles.

  10. #10
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2019
    Messages
    549
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2019
    Messages : 549
    Points : 788
    Points
    788
    Par défaut
    ton lien ne fonctionne pas !

  11. #11
    Membre actif
    Homme Profil pro
    Reconversion
    Inscrit en
    novembre 2018
    Messages
    458
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Reconversion
    Secteur : Santé

    Informations forums :
    Inscription : novembre 2018
    Messages : 458
    Points : 271
    Points
    271
    Par défaut
    Je parle de la répartition au sens large et non pas d'une seule méthode, mais effectivement si la doc en parle je suis preneur !

  12. #12
    Membre actif
    Homme Profil pro
    OoW
    Inscrit en
    juin 2019
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : juin 2019
    Messages : 63
    Points : 226
    Points
    226
    Par défaut
    c'est corrigé

  13. #13
    Expert confirmé

    Homme Profil pro
    Développeur .NET
    Inscrit en
    novembre 2010
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : novembre 2010
    Messages : 2 035
    Points : 4 133
    Points
    4 133
    Par défaut
    Citation Envoyé par krakatoa Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    // quand la valeur d'un @Input est modifié, la fonction ngOnchange est appelé :
    ngOnChange(.......) {             
     
     
     
    }
    Une astuce que j'utilise c'est que tu peux définir un input en tant que setter et donc appeler du code dedans, j'ai jamais eu à utiliser le ngOnchange, cette astuce est aussi compatible avec les ViewChild et appellera le setter quand le ViewChild sera initialisé.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      _couverturesData: PropositionsAssuranceParCouvertureInterface | null = null;
      @Input() set couverturesData(value: PropositionsAssuranceParCouvertureInterface | null) {
        this._couverturesData = value;
        if (value) {
          this.setpropositionsAssurance(value);
        }
      }
      get couverturesData(): PropositionsAssuranceParCouvertureInterface | null {
        return this._couverturesData;
      }

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

Discussions similaires

  1. Réponses: 2
    Dernier message: 08/07/2015, 09h06
  2. Réponses: 2
    Dernier message: 18/09/2012, 14h58
  3. appeler une méthode avec paramètre dans une page JSP
    Par javasmif dans le forum Struts 2
    Réponses: 1
    Dernier message: 06/12/2007, 10h48
  4. [POO] Appeler une méthode redéfinie de la classe parente
    Par Djakisback dans le forum Langage
    Réponses: 5
    Dernier message: 04/08/2006, 22h56
  5. appeller une méthode dans le nom est dans un String
    Par fxjtarga dans le forum Langage
    Réponses: 2
    Dernier message: 24/02/2006, 16h06

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