Tengo el requisito de llamar a una función de controlador secundario desde el controlador principal siempre que el evento ocurra en el lado principal .
por ejemplo,
ABC es el componente principal y DCE es el componente secundario, este componente secundario tiene la etiqueta Span of Text y el símbolo X. cuando hago clic en x, se borra el valor usando el controlador secundario. El componente principal ABC tiene un elemento de formulario y el componente secundario es uno de formulario.
Mi requisito es borrar el valor de este componente secundario cuando se hace clic en el botón del componente principal.
aquí está el a continuación el código de muestra de lo que estoy intentando porque no puedo publicar el código real aquí
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); } }) Comentarios
- A menos que proporciones el código, es difícil ayudarte
- Mohit, agregó el código. No puedo publicar mi código original, pero he dado una muestra de lo que estaba tratando de lograr.
Respuesta
El nombre del controlador en su componente hijo debe coincidir con el nombre registrado en el componente padre. es decir, el controlador en el componente secundario debería ser así:
<aura:handler name="clrValues" event="c:ClearValues" action="{!c.clear}"/> –UPDATE –
Creo que un mejor enfoque para la comunicación entre padres e hijos es usar <aura:method> como se indica en lightning docs y aquí
Para hacer esto, debes definir un método en componente secundario como este:
<aura:method name="sampleMethod" action="{!c.clear}" access="PUBLIC"> Debería tener una identificación cuando lo refiera dentro de su componente principal de esta manera:
<c:ChildComponent textValue="test" aura:id="cComp"/> Luego, en el método claro del componente principal, debe invocar el método secundario de esta manera:
var childCmp = component.find("cComp") childCmp.sampleMethod(); Comentarios
- Se aplica solo para eventos de nivel de componente, no para eventos de aplicación.
- hmm que ' es cierto. No ' noté que este es un evento de aplicación. @Raj_SFDC, ¿por qué ' t hacer de su evento un evento componente?
Responder
El controlador de eventos de la aplicación no debe contener el atributo name solo el event y action es suficiente como se menciona aquí .
Así es como se debe activar un evento de aplicación en su método clear:
({ clear : function(component, event, helper) { $A.get("e.c:clrValues").fire(); } }) Para obtener más información, consulte la sección sobre eventos de aplicaciones en el doc .
Comentarios
- No tuve suerte con eso también, mi suposición es que no podemos manejar el evento en el niño del padre. por favor confirme
- @Raj_SFDC podemos disparar un evento de aplicación de padre a hijo. Dicho esto, lo está haciendo incorrectamente. He actualizado mi respuesta, por favor mírela.
- Tengo una pregunta aquí desde arriba [$ A.get (" ec: clrValues ")], cómo obtener el valor del atributo.
- ¿te refieres a los parámetros del evento? Si es así, puedes configurarlo usando
$A.get("e.c:clrValues").setParams({'message':'test'})y disparar el evento, entonces en el método del controlador puedes usar$A.get("e.c:clrValues").getParam('message')para recuperar el valor.