Aura.Action :
==============
Use Aura.Action type of attribute if you want to pass the reference of parent lightning component controller.js function to nested/child lightning component .
ex : child Component
<aura:component >
<aura:attribute name="ltngMessage" type="string"></aura:attribute>
<aura:attribute name="closeChildDivFunction" type="Aura.Action" default="{! c.defaultCloseAction}"></aura:attribute>
<div aura:id="maincontainer" style="background-color:#E6E6FA;border-style: solid;height:100px;margin:2%;padding:1%;">
<b>This is Child component inside AuraActionDemoCmp</b>
<br/>
<lightning:button label="Close via ChildCmp JS function" variant="neutral" onclick="{!c.defaultCloseAction}"/>
<lightning:button label="Close via Parent JS function" variant="brand" onclick="{!v.closeChildDivFunction}"/>
</div>
</aura:component>
defaultCloseAction : function(component, event, helper) {
debugger;
//perform you logic and close the modal dialog
component.set("v.ltngMessage","Close via ChildCmp JS function button clicked.Please refresh your browser if you again want to load this demo component");
var mc=component.find("maincontainer");
$A.util.addClass(mc, "slds-hide");
}
Parent Component :
<aura:component >
<aura:attribute name="ltnguserActionMessage" type="string" default="Waiting for User Action"/>
<div style="background-color:#e7eff8;border-style: solid;padding:2%;">
<b> This is Parent(AuraAction Parent) component </b>
<br/>
ltnguserActionMessage value-<b>{!v.ltnguserActionMessage}</b>
<br/>
<div aura:id="childContainer" >
<p>This content is inside childContainer div</p>
<ul class="slds-list--ordered">
<li>If user clicks on "Close via Parent JS function" button,then this content will also get removed</li>
<li>If user clicks on "Close via ChildCmp JS function" button,then only child component body will be removed</li>
</ul>
<c:AuraActionChild ltngMessage="{!v.ltnguserActionMessage}" closeChildDivFunction="{!c.destroyChildCmp}"/>
</div>
</div>
</aura:component>
destroyChildCmp: function(component, event, helper) {
debugger;
component.set("v.ltnguserActionMessage","Close via Parent JS function button clicked. Please refresh your browser if you again want to load this demo component.");
var cmp = component.find('childContainer');
cmp.set("v.body",[]);
}
App :
<aura:application extends="force:slds" >
<c:AuraActionParent></c:AuraActionParent>
</aura:application>
Note :
======
1.It is discourged to use component.set() with the Aura.Action attribute types.
2.It is discourged to use $A.enqueueAction() in the child component to enqueue the action passed to the Aura.Action
attribute.
No comments:
Post a Comment