Hoe de functie / helper van de kindcomponentcontroller te bellen vanuit de oudercomponentcontroller

Ik moet een kindcontrollerfunctie aanroepen van de oudercontroller wanneer de gebeurtenis zich voordoet in de bovenliggende kant .

voor bijv.

ABC is de bovenliggende component en DCE is de onderliggende component, deze onderliggende component heeft een tekenreeks van tekst en een X-symbool. wanneer ik op x klik, wordt de waarde gewist met behulp van de kindcontroller. De bovenliggende component ABC heeft een formulierelement en de onderliggende component is er een van in vorm.

Mijn vereiste is om de waarde van deze onderliggende component te wissen wanneer op de bovenliggende componentknop wordt geklikt.

hier is de onderstaande voorbeeldcode van wat ik probeer, omdat ik hier geen echte code kan posten

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

Reacties

  • Tenzij je de code opgeeft, is het moeilijk om je te helpen
  • Mohit, voegde de code toe ik kan mijn originele code niet plaatsen, maar ik heb een voorbeeld gegeven van wat ik probeerde te bereiken.

Answer

De handlernaam in uw kindcomponent moet overeenkomen met de geregistreerde naam in het oudercomponent. dat wil zeggen, de handler in de onderliggende component zou als volgt moeten zijn:

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

–UPDATE –

Ik denk dat een betere benadering voor ouder-tot-kind-communicatie is om <aura:method> te gebruiken zoals vermeld in lightning docs en hier

Om dit te doen, moet u een methode definiëren in kindcomponent zoals dit:

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

Je zou dan een id moeten hebben als je het als volgt in je oudercomponent doorverwijst:

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

Dan zou je in de clear-methode van de bovenliggende component de onderliggende methode als volgt moeten aanroepen:

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

Reacties

  • Het is alleen van toepassing op componentniveau-gebeurtenis, niet op een toepassingsgebeurtenis.
  • hmm dat ' is waar. Ik heb ' niet opgemerkt dat dit een toepassingsgebeurtenis is. @Raj_SFDC, waarom kun je ' niet van je evenement een componentevenement maken?

Antwoord

Application Event-handler mag geen name -kenmerk bevatten, alleen het event en action attribuut is voldoende zoals vermeld hier .

Dit is hoe een toepassingsgebeurtenis moet worden geactiveerd in uw duidelijke methode:

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

Kijk voor meer informatie naar de sectie over toepassingsgebeurtenissen in het document .

Reacties

  • Ook daar heb ik geen geluk mee, mijn aanname is dat we de gebeurtenis in het kind van de ouder niet kunnen verwerken. bevestig alstublieft
  • @Raj_SFDC we kunnen een aanmeldingsgebeurtenis van de ouder op het kind activeren. Dat gezegd hebbende, doet u het verkeerd. Ik heb mijn antwoord bijgewerkt, bekijk het alsjeblieft.
  • Ik heb hier een vraag van boven [$ A.get (" ec: clrValues ")], hoe verkrijg attribuutwaarde.
  • verwijst u naar gebeurtenisparameters? als dat zo is, kunt u deze instellen met $A.get("e.c:clrValues").setParams({'message':'test'}) en de gebeurtenis activeren, dan kunt u in de handlermethode $A.get("e.c:clrValues").getParam('message') om de waarde terug te krijgen.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *