How to navigate to one component to another by passing parameters

Question

I'm new to Salesforce. I have just started with lightning Aura components. I want to understand simple workflow of aura. Can anyone help me with the code for below requirement. Thanks in advance.

Requirement. I have two custom components. One component has list of custom object records. Another component has detail page of that record. Onclick of record in the first component it should navigate to second component by passing Id and display current record details.

Sample code attached; Component1.cmp:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"><aura:attribute name="Result" type="String"/>
  <lightning:navigation aura:id="navService"/>
  <ui:inputText aura:id="n1" maxlength="5" size="5" label="Number1" required="true"/>
  <ui:inputText aura:id="n2" maxlength="5" size="5" label="Number2" required="true"/>
  <ui:button label="Sum" press="{!c.Calculate}"/></aura:component>

Component1.js

({Calculate : function(component, event, helper) {
  var a = component.find("n1").get("v.value");
  var b = component.find("n2").get("v.value");
  var res = parseInt(a) + parseInt(b);
  res = res + '';
  component.find("navService").navigate({    
    "type": "standard__component",
     "attributes": {
         "componentName": "c__Component2"    
     },    
     "state": {
         "res":"5"  
     }
});

} })

Component2.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,lightning:isUrlAddressable"><aura:attribute name="res" type="String" />The result is {!v.res}</aura:component>

Answer 1

You can use lighting:navigation for that:

cmp:

<lightning:navigation aura:id="navService"/>

JS: (for standard record page)

goToRecord: function(component,event,helper) {
    component.find("navService").navigate({
        "type": "standard__recordPage",
       "attributes": {
           "recordId": "001xx000003DGg0AAG",
           "objectApiName": "TargetObjectAPIName__c",
           "actionName": "view"
       }
    });
}

Js for custom component (should implement lightning:isUrlAddressable interface)

goToRecord: function(component,event,helper) {
    component.find("navService").navigate({    
        "type": "standard__component",
         "attributes": {
             "componentName": "c__MyLightningComponent"    
         },    
         "state": {
             "c__recordId": ""//pass the target target record id    
         }
    });
}

References:

1. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm

2. https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

---

CORRECTIONS:

correct state as below:

"state": {
     "c__res":"5"  
 }

Component2 html:

<aura:component implements="lightning:isUrlAddressable" >
    <aura:attribute name="res" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}"/>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
    Hello {!v.firstname}.

    The result is {!v.res}
</aura:component>

Now its JS:

({
    onPageReferenceChange: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var firstname = myPageRef.state.c__res;
        cmp.set("v.res", res);
    }
})