Comment appeler la fonction / laide du contrôleur de composant enfant à partir du contrôleur de composant parent

Jai besoin dappeler une fonction de contrôleur enfant à partir du contrôleur parent chaque fois que lévénement se produit côté parent .

par exemple

ABC est le composant parent et DCE est le composant enfant, ce composant enfant a la balise Span of Text et le symbole X. lorsque je clique sur x, la valeur est effacée à laide du contrôleur enfant. Le composant parent ABC a un élément Form et le composant enfant en est un.

Ma condition est deffacer la valeur de ce composant enfant lorsque le bouton du composant parent est cliqué.

voici le ci-dessous un exemple de code de ce que jessaie car je ne peux pas publier de code réel ici

ParentComponent.cmp

 <aura:registerEvent name="clrValues" type="c:ClearValues"/> <div> <c:ChildComponent textValue="test"/> <ui:button label="Save"/> <ui:button label="Clear" press="{!c.clear}"/> </div> </aura:component> 

ParentController.js

({ clear : function(component, event, helper) { var evtFire = component.getEvent("clrValues"); evtFire.fire(); } }) 

ClearValues.evt

<aura:event type="APPLICATION" description="Event template" /> 

ChildComponent.cmp

<aura:component > <aura:handler name="setValues" event="c:ClearValues" action="{!c.clear}"/> <aura:attribute name="textValue" type="String" default="test"/> <div > <ui:inputText label="Expense Name" value="{!v.textValue}" aura:id="input1"/> </div> </aura:component> 

ChildController.js

({ clear : function(component, event, helper) { helper.clearValues(component,event); } }) 

Commentaires

  • À moins que vous ne fournissiez le code, il est difficile de vous aider
  • Mohit, a ajouté le code que je ne peux pas publier mon code dorigine, mais jai donné un exemple de ce que jessayais de réaliser.

Réponse

Le nom du gestionnaire dans votre composant enfant doit correspondre au nom enregistré dans le composant parent. cest-à-dire que le gestionnaire du composant enfant doit être comme ceci:

 <aura:handler name="clrValues" event="c:ClearValues" action="{!c.clear}"/> 

–UPDATE –

Je pense quune meilleure approche de la communication parent-enfant consiste à utiliser <aura:method> comme indiqué dans lightning docs et ici

Pour ce faire, vous devez définir une méthode dans composant enfant comme celui-ci:

 <aura:method name="sampleMethod" action="{!c.clear}" access="PUBLIC"> 

Vous devriez alors avoir un identifiant lorsque vous le référez à lintérieur de votre composant parent comme ceci:

 <c:ChildComponent textValue="test" aura:id="cComp"/> 

Ensuite, dans la méthode clear du composant parent, vous devez appeler la méthode enfant comme ceci:

 var childCmp = component.find("cComp") childCmp.sampleMethod(); 

Commentaires

  • Cela sapplique uniquement pour un événement au niveau du composant, pas pour un événement dapplication.
  • hmm que ' est vrai. Je nai ' pas remarqué quil sagit dun événement dapplication. @Raj_SFDC, pourquoi ne pouvez-vous ' faire de votre événement un événement composant?

Réponse

Le gestionnaire dévénements dapplication ne doit pas contenir lattribut name uniquement event et action suffit comme mentionné ici .

Voici comment un événement dapplication doit être déclenché dans votre méthode clear:

({ clear : function(component, event, helper) { $A.get("e.c:clrValues").fire(); } }) 

Pour plus dinformations, consultez la section sur lévénement dapplication dans le doc .

Commentaires

  • Pas de chance avec ça aussi, je suppose que nous ne pouvons pas gérer lévénement dans lenfant du parent. Veuillez confirmer
  • @Raj_SFDC que nous pouvons déclencher un événement dapplication du parent à lenfant. Cela dit, vous ne faites pas correctement. Jai mis à jour ma réponse, veuillez la regarder.
  • Jai une question ci-dessus [$ A.get (" ec: clrValues ")], comment obtenir la valeur dattribut.
  • faites-vous référence aux paramètres dévénement? Si cest le cas, vous pouvez le définir en utilisant $A.get("e.c:clrValues").setParams({'message':'test'}) et déclencher lévénement, alors dans la méthode du gestionnaire, vous pouvez utiliser $A.get("e.c:clrValues").getParam('message') pour récupérer la valeur.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *