Navigate from one component to another component attribute value in lightning Salesforce

Step 1-Create Component1.

<aura:component implements="force:appHostable">
 <aura:attribute name="accountid" type="String" />
<ui:button aura:id="btnId" label="Test" press="{!c.NavigateToComponent2}"/>
</aura:component>
NavigateToComponent2: function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");

        evt.setParams({
                componentDef: "Component2",
                componentAttributes: {
                myAttribute: component.get("v.id")
            }
        });
    evt.fire();    
}

Step 2-Create Componenrt2

<aura:component implements="force:appHostable">

 <aura:attribute name="accountid" type="String" />
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   Hello
</aura:component>

doInit : function(component, event, helper) {
        alert(component.get("v.accountid")) ;
    }
Note-Passed Attribute name must be available in both component.