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

Code:

---

1 2 3 4

parent enfant --------------------> @Input <------------------- @Output

---

* 'toto' est envoyé du parent à l'enfant et vice versa :

Code:

---

1 2 3 4

parent enfant []="'toto'"--------------------> @Input <---------------- event.emit('toto') @Output

---

ai je répondu à ta question ?

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

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:

---

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 !

Encore une brillante explication de ta part : merci !!

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.

Code:

---

1 2 3 4 5 6

// quand la valeur d'un @Input est modifié, la fonction ngOnchange est appelé : ngOnChange(.......) {       }

---

ok merci, c'est l'enfer le refacto...

\ô/
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.

ton lien ne fonctionne pas !:aie:

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 !

:oops: c'est corrigé
:merci:

Citation:

---

Envoyé par krakatoa

Code:

---

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:

---

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; }

---