Tenho o requisito de chamar uma função de controlador de filho do controlador de pai sempre que o evento ocorrer no lado dos pais .
por exemplo,
ABC é o componente pai e DCE é o componente filho, este componente filho tem a tag Span of Text e o símbolo X. quando clico em x, o valor é apagado usando o controlador filho. O componente pai ABC tem o elemento Form e o componente filho é um de no formulário.
Meu requisito é limpar o valor deste componente filho quando o botão do componente pai é clicado.
Aqui está o abaixo, um exemplo de código do que estou tentando porque não consigo postar o código real aqui
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); } }) Comentários
- A menos que você forneça o código, é difícil ajudá-lo
- Mohit, adicionei o código, não posso postar meu código original, mas dei uma amostra do que estava tentando alcançar.
Resposta
O nome do manipulador em seu componente filho deve corresponder ao nome registrado no componente pai. ou seja, o manipulador no componente filho deve ser assim:
<aura:handler name="clrValues" event="c:ClearValues" action="{!c.clear}"/> –UPDATE –
Acho que uma abordagem melhor para a comunicação de pai para filho é usar <aura:method> conforme listado em documentos relâmpago e aqui
Para fazer isso, você deve definir um método em componente filho como este:
<aura:method name="sampleMethod" action="{!c.clear}" access="PUBLIC"> Você deve ter um id ao referenciá-lo dentro de seu componente pai como este:
<c:ChildComponent textValue="test" aura:id="cComp"/> Então, no método claro do componente pai, você deve invocar o método filho como este:
var childCmp = component.find("cComp") childCmp.sampleMethod(); Comentários
- Aplica-se apenas a eventos de nível de componente, não a eventos de aplicativos.
- hmm that ' s true. Não ' não percebi que este é um evento de aplicativo. @Raj_SFDC, por que ' você não pode transformar seu evento em um evento componente?
Resposta
O manipulador de eventos do aplicativo não deve conter name atributo apenas o event e action é suficiente, conforme mencionado aqui .
É assim que um evento de aplicativo deve ser disparado em seu método claro:
({ clear : function(component, event, helper) { $A.get("e.c:clrValues").fire(); } }) Para obter mais informações, consulte a seção sobre o evento do aplicativo no documento .
Comentários
- Sem sorte com isso também, suponho que não podemos controlar o evento filho do pai. confirme
- @Raj_SFDC podemos disparar um evento de aplicativo do pai para o filho. Dito isso, você está fazendo isso incorretamente. Atualizei minha resposta, por favor, olhe para ela.
- Tenho uma pergunta aqui acima [$ A.get (" ec: clrValues ")], como obter o valor do atributo.
- você está se referindo aos parâmetros do evento? Nesse caso, você pode defini-lo usando
$A.get("e.c:clrValues").setParams({'message':'test'})e disparar o evento, então, no método do manipulador, você pode usar$A.get("e.c:clrValues").getParam('message')para obter o valor de volta.