Send value from component A (in one page) to component B (in another page), navigating to component B, and retrieving the passed value

Question

I am trying to pass a value from one component (Component A) in a lightning app (Home page) to another component (Component B) in a different lightning app (App page). The components are not parent/child, and the components are not within one container. Therefore, they are two independent components.

When a link is clicked on Component A, a value is supposed to be passed to the application event then the user is directed to Component B, which is supposed to handle and show the passed value. On the first click, I am redirected to Component B but the value does not appear. However, when I return to the Home page and click on the link again, I am directed to Component B but this time the value appears!

How do I get the value to appear on the first click?

The dispatching component markup, componentA.cmp:

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:registerEvent name="passTheValue" type="c:ApprovalDashboardStatus"/>
        <lightning:navigation aura:id="navService"/>
        <a name="theValueToPass" onclick="{!c.handleClick"}">Click Me</a>
</aura:component>

The dispatching controller, componentAController.js:

handleClick : function(component, event, helper) {
    var setEvent = $A.get("e.c:passTheValueEvent");
    setEvent.setParams({
        "valueToPass": event.currentTarget.name;
        });
    setEvent.fire();

    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:componentB"
    });
    evt.fire();
}

The application event, passTheValueEvent.evt:

<aura:event type="APPLICATION">
    <aura:attribute name="valueToPass" type="String" />
</aura:event>

The receiving component's markup, componentB.comp:

<aura:component implements="flexipage:availableForAllPageTypes, lightning:isUrlAddressable" controller="lightningUtils">
    <aura:handler event="c:passTheValueEvent" action="{!c.getTheValue}"  />
</aura:component>

The receiving component's controller, componentBController.js:

getTheValue : function(component, event, helper) {
    var receiveTheValue = event.getParam("valueToPass");
    console.log(receiveTheValue);
}

The value is not passed initially on the first click. However, when I return to Component A and click again, the value is passed that time. How do I make the value pass on the first click?

Answer 1

You have declared

But not using it. Check out below link Component Navigation

force:navigateToComponent is old and soon to be a deprecated way of component navigation

Using the new pageReference type you won't need to even use the event as you can pass the attribute directly to component B and read it in its controller.

The reason you are not able to read the value in the first click is due to the event not being fired by Component A by the time you navigated to the component B.

Answer 2

Thanks maniac coder, I was able to accomplish this task. Instead of using an application event, I used pageReference which allows me to both send values and navigate to the second component.

Additional info: Clicking on Component A's link allows me to navigate to Component B's page and handle the passed value using the pageReference method. However, going back to the Home page, updating the value, and clicking on the link again redirects you to Component B, but the value is not refreshed and the data from the first click remains. To solve this, I used the fix from this post.

<aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}"/>

In short, a change handler for the pageReference state and a reInit function was added. Then, I made the reInit function call the getTheValue function. The change handler does not fire on initial load. It fires on re-navigation to the component.