Come chiamare la funzione / helper del controller del componente figlio dal controller del componente principale

Devo chiamare una funzione del controller del bambino dal controller principale ogni volta che levento si verifica nel lato padre .

ad esempio

ABC è il componente padre e DCE è il componente figlio, questo componente figlio ha il tag Span of Text e il simbolo X. quando clicco su x, il valore viene cancellato utilizzando il controller figlio. Il componente genitore ABC ha un elemento Form e il componente figlio è uno dei componenti nel form.

Il mio requisito è cancellare il valore di questo componente figlio quando si fa clic sul pulsante del componente genitore.

ecco il sotto il codice di esempio di ciò che sto provando perché non riesco a pubblicare il codice effettivo qui

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

Commenti

  • A meno che tu non fornisca il codice, è difficile aiutarti
  • Mohit, ha aggiunto il codice non posso pubblicare il mio codice originale, ma ho fornito un esempio di ciò che stavo cercando di ottenere.

Risposta

Il nome del gestore nel componente figlio deve corrispondere al nome registrato nel componente genitore. cioè, il gestore nel componente figlio dovrebbe essere così:

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

–UPDATE –

Penso che un approccio migliore per la comunicazione da genitore a figlio sia utilizzare <aura:method> come elencato in lightning docs e qui

Per fare ciò, dovresti definire un metodo in componente figlio in questo modo:

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

Dovresti quindi avere un ID quando lo fai riferimento allinterno del tuo componente genitore in questo modo:

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

Quindi, nel metodo clear del componente genitore, dovresti invocare il metodo figlio in questo modo:

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

Commenti

  • Si applica solo per eventi a livello di componente, non per un evento applicazione.
  • hmm che ' è vero. ' non ho notato che si tratta di un evento dellapplicazione. @Raj_SFDC, perché ' t rendere il tuo evento un evento componente?

Rispondi

Il gestore dellevento dellapplicazione non deve contenere lattributo name ma solo event e action è sufficiente come indicato qui .

Questo è il modo in cui un evento dellapplicazione dovrebbe essere attivato nel tuo metodo clear:

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

Per ulteriori informazioni, consulta la sezione sullevento dellapplicazione nel documento .

Commenti

  • Niente fortuna anche con questo, la mia ipotesi è che non possiamo gestire gli eventi nel figlio da parte dei genitori. per favore conferma
  • @Raj_SFDC possiamo attivare un evento dellapplicazione dal genitore al figlio. Detto questo, stai facendo in modo errato. Ho aggiornato la mia risposta, per favore guardala.
  • Ho una domanda qui sopra [$ A.get (" ec: clrValues ")], come ottenere il valore dellattributo.
  • ti riferisci ai parametri dellevento? In tal caso puoi impostarlo utilizzando $A.get("e.c:clrValues").setParams({'message':'test'}) e attivare levento, quindi nel metodo del gestore puoi utilizzare $A.get("e.c:clrValues").getParam('message') per recuperare il valore.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *