Navigation between components in lightning

Question

I am trying to build navigation from one component to another in a Lightning application. Following this answer How to set up views and navigation in Lightning? got me working with one exception, the new page doesn't seem to be in the Salesforce1 navigation context, there is no back arrow when the second component is loaded.

Am I missing something simple? Sure feels like I am.

Answer 1

This can now be accomplished via lightning:navigation documented here.

Summary

The target/ to component must implement lightning:isUrlAddressable interface and the source/ from component needs to include lightning:navigation, generate URL for a given pageReference (in this case to a custom component) and finally call the navigate method with that pageReference.

Here is a sample:

Target/ To Component

Component - myTarget.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,lightning:isUrlAddressable">
    <lightning:card iconName="standard:settings" title="Navigation Example">
        <lightning:formattedText class="slds-p-left_small" value="This is your target component."/>
    </lightning:card>
</aura:component>

Source/ From Component

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate to Target Component" onclick="{!c.navigate}" />
</aura:component>

Controller JS

({
    navigate : function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__myTarget"
            }, 
            "state": {}
        };
        navService.navigate(pageReference);
    }
})

Answer 2

Found it.. for those looking for this answer..

navigateToRollCall : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:AttendanceRollCall",
            componentAttributes: {
                programId: component.get("v.program.Id")
            }
        });
    evt.fire();    
}

Answer 3

In Summer 15, e.force:navigateToComponent does not work unless the target component is already loaded. I worked around this by embedding the target component in the source component in an <aura:if isTrue="{!false}">.

Answer 4

From my reply in the thread below:

JavaScript source is not documentation, and does not indicate support. Please refer to the docs for the official API. Use of unsupported components, events, or APIs is a violation of the terms of service, and your code may break in a release, including patch.

Answer 5

The event(force:navigateToComponent) can be found in app.js which is used in Salesforce1 internally. However no docs introduce it until now(Spring '15).

Definition details,

{
    "$descriptor$": {
        "prefix": "markup", 
        "$namespace$": "force", 
        "name": "navigateToComponent", 
        "$qualifiedName$": "markup://force:navigateToComponent"
    }, 
    "$superDef$": {
        "$descriptor$": {
            "prefix": "markup", 
            "$namespace$": "aura", 
            "name": "applicationEvent", 
            "$qualifiedName$": "markup://aura:applicationEvent"
        }, 
        "$superDef$": null, 
        "$attributeDefs$": { }, 
        "type": "APPLICATION"
    }, 
    "$attributeDefs$": {
        "componentDef": {
            "name": "componentDef", 
            "type": "aura://String"
        }, 
        "componentAttributes": {
            "name": "componentAttributes", 
            "type": "aura://Object"
        }, 
        "forceServerDependencies": {
            "name": "forceServerDependencies", 
            "type": "aura://Boolean"
        }, 
        "resetHistory": {
            "name": "resetHistory", 
            "type": "aura://Boolean", 
            "default": false
        }, 
        "ignoreExistingAction": {
            "name": "ignoreExistingAction", 
            "type": "aura://Boolean", 
            "default": false
        }
    }, 
    "type": "APPLICATION"
}