Calling a lightning component from another component on a button click

The first component is calling the second component on a button click which calls the function callSaveComp: I am trying to pass the record id of the current record since the first component is on the Account page. So using "v.recordId" in the controller. I can see that v.recordId has the value of the account record but it doesn't get passed to the next component on button click.

<aura:component controller="PartnerAffiliates" implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,force:appHostable" access="global" >
other code.....
        <lightning:button variant="neutral" label="New" onclick="{!c.callSaveComp}"/>
</aua:component>

controller for first component:

callSaveComp : function(component, event, helper){
        var evt = $A.get("e.force:navigateToComponent");
        console.log('Event '+evt);
        var accountFromId = component.get("v.recordId");
        evt.setParams({
            componentDef  : "c:AffiliateSaveForm" ,
            componentAttribute : {
                accId : accountFromId
            }
        });
        evt.fire();
}

Second component:

<aura:component access="global" controller="PartnerAffiliates" implements="force:appHostable">
     <aura:attribute name="accId" type="String" access="global"/>
    Other stuff....
</aura:component>