Discussion :

[olivier252]

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

[krakatoa]

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 ?

[olivier252]

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().

[krakatoa]

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 !

[olivier252]

Encore une brillante explication de ta part : merci !!

[olivier252]

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.