[SalesForce] How to refresh the specific Lightning component not the lightning page

I have two lightning component placed on one page lightning app.
First Component have refresh icon and I set onclick action to refresh Component
$A.get('e.force:refreshView').fire(); but this event refresh the whole page instead of First component. how can refresh only one component on page not all the page ?

Best Answer

If you are refreshing the component from the context of a parent, you don't need to use an event - you can expose a method to the parent and get it to call that.

If you are refreshing the component from within the child itself, you could either use an event or re-run your init routine.

So for a parent calling a public method:

 <aura:method name="reInit" action="{!c.doInit}" description="Runs the init method again ">

The parent could get a reference to the child component and call childComponent.reInit()

For a parent totally refreshing the child, the parent could dynamically recreate the component:

    //clear body of host component just in case
var hostComponent = component.find("enclosingComponent");
hostComponent.set("v.body", []);

$A.createComponent(
  'c:YourChildComponent', {
          "someParam":"someValue"
  },
  function(newComponent, status, errorMessage) {
    //Add the new button to the body array
    if (status === "SUCCESS") {
      var body = hostComponent.get("v.body");
      body.push(newComponent);
      hostComponent.set("v.body", body);
    } else if (status === "INCOMPLETE") {
      console.log("No response from server or client is offline.");
    } else if (status === "ERROR") {
      console.log("Error: " + errorMessage);
    }
  }
);

From the child component If you are doing this from within the component, you can despatch an event to the parent if you want a total refresh, or run the reInit method yourself.

You can define a new COMPONENT event fire it to tell the parent that you want to be refreshed.

<aura:event type="COMPONENT" description="Event used to tell the parent to refresh" >
  <aura:attribute name="componentName" type="string"/>
</aura:event>

In the child component:

<!--markup-->
<aura:registerEvent name="refreshChildComponent" type="c:RefreshChild"/>

//handler
var e = component.getEvent("refreshChildComponent");
e.setParams({ "componentName": "child1"});
e.fire();

In the parent component:

<aura:handler name="refreshChildComponent" event="c:RefreshChild" action="{!c.refreshChild}" />

In the parent helper, the same code as above could be called - in the parent calling a public method section

Related Topic