0

So, I had a problem with navigating from Parent component to Child component, but it was solved. But now I have even stranger problem.

So, I did navigation from Parent component to the Child one, but I also need to make navigation from Child component to Baby component. I used exact same code for .js methods and same edits for components, but still, it doesn't work.

Parent component:

<aura:component implements="force:appHostable, lightning:isUrlAddressable" access="global">
<aura:attribute name="typename" type="string" required="true" default="test type" />
<aura:attribute name="pageReference" type="object" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:navigation aura:id="navService"/>
<div style="align-content: center">
    <div class="c-container slds-theme_default custom-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header slds-align_absolute-center">
                    <h1>
                        New Work Type
                    </h1>
                </div>
            </lightning:layoutItem>
            <div style="align-content: center;">
                <lightning:layoutItem padding="around-small" size="12">
                    <lightning:layout>
                        <lightning:layoutItem padding="around-small" size="4">
                            <div class="page-section page-main custom-form">
                                <div class="custom-input">
                                    <lightning:input aura:id="typename" value="{!v.typename}" label="Work Type Name" required="true" />
                                    <lightning:button variant="brand" class="slds-float_right" label="Next" onclick="{!c.navigateToMyComponent}" />
                                </div>
                            </div>
                        </lightning:layoutItem>
                    </lightning:layout>
                </lightning:layoutItem>
            </div>
        </lightning:layout>
    </div>
</div>

Parent component controller:

({
doInit: function (component, event, helper) {
    var pageReference = {
        type: 'standard__controller',
        attributes: {
            componentName: 'c__CarServiceComponent2'
        },
            state: {
                "c__requiredFor": "{!v.typename}"
            }
    };
    component.set("v.pageReference", pageReference);
},

navigateToMyComponent: function (component, event, helper) {
    var navService = component.find("navService");
    var pageReference = component.get("v.pageReference");
    event.preventDefault();
    navService.navigate(pageReference);
},})

Child component:

<aura:component implements="force:appHostable, lightning:isUrlAddressable" description="c:CarServiceComponent2" access="global">
<aura:attribute name="requiredFor" type="string" required="true" default="test" />
<aura:attribute name="redirect" type="string" access="global" />
<aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
<aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}" />
<lightning:navigation aura:id="navService"/>
<div style="align-content: center;">
    <div class="c-container slds-theme_default custom-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header slds-align_absolute-center">
                    <h1>
                        New Skill Requirement
                    </h1>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="12">
                <lightning:layout>
                    <lightning:layoutItem padding="around-small" size="4">
                        <div class="page-section page-main custom-form">
                            <div class="custom-input" style="align-content: center;">
                                <lightning:input aura:id="requiredFor" label="Required For" value="{!v.requiredFor}"
                                    required="true" />
                        </div>
                        </div>
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</div>

Child component controller

({ onPageReferenceChange: function(cmp, evt, helper) { var myPageRef = cmp.get("v.pageReference"); var requiredFor = myPageRef.state.c__requiredFor; cmp.set("v.requiredFor", requiredFor);

},
doInit: function(component, event, helper){
    var requiredFor = component.find('requiredFor').get('v.value');
    var pageReference = {
        type: 'standard__component',
        attributes:{
            componentName: 'c__CarComponentService3',
        },
        state: {
            "c__parentRecord": requiredFor
        }
    };
    component.set("v.pageReference", pageReference);
},
navigateToMyComponent2: function(component, Event, helper){
    var navService = component.find("navService");
    var pageReference = component.get("v.pageReference");
    event.preventDefault();
    navService.navigate(pageReference);
}

})

Baby component:

<aura:component implements="force:appHostable, lightning:isUrlAddressable" access="global">
<aura:attribute name="parentRecord" type="string" required="true" default="test type" />
<aura:attribute name="pageReference" type="object" />
<aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}" />
<aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
<div style="align-content: center">
    <div class="c-container slds-theme_default custom-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header slds-align_absolute-center">
                    <h1>
                        New Product Required
                    </h1>
                </div>
            </lightning:layoutItem>
            <div style="align-content: center;">
                <lightning:layoutItem padding="around-small" size="12">
                    <lightning:layout>
                        <lightning:layoutItem padding="around-small" size="4">
                            <div class="page-section page-main custom-form">
                                <div class="custom-input">
                                    <lightning:input aura:id="parentRecord" value="{!v.parentRecord}" label="Parent Record" required="true" />
                                    <lightning:button variant="brand" class="slds-float_right" label="Next" />
                                </div>
                            </div>
                        </lightning:layoutItem>
                    </lightning:layout>
                </lightning:layoutItem>
            </div>
        </lightning:layout>
    </div>
</div>

Baby component controller:

({
doInit : function(component, event, helper) {

},
onPageReferenceChange: function (cmp, evt, helper) {
    var myPageRef = cmp.get("v.pageReference");
    var parentRecord = myPageRef.state.c__parentRecord;
    cmp.set("v.parentRecord", parentRecord);
}})
4
  • i found there is no lightning:navigation in your child component and from which click event in your child cmp you want navigate to baby cmp?
    – sdandamud1
    Commented Aug 21, 2019 at 17:08
  • No, there is one, I probably forgot to put it here, but that's not the reason for sure - I've already checked. I want to trigger navigation from child to baby cmp using NavigateToMyComponent2 method in child cmp controller. And it should work, just like navigation from parent to child cmp - they are totally the same methods...well, as far, as I see it. Commented Aug 21, 2019 at 18:07
  • Please update your Question with fully Child cmp and baby cmp code, based on above comment i couldn't figure out NavigateToMyComponent2 click event in your child cmp
    – sdandamud1
    Commented Aug 21, 2019 at 18:10
  • Done! Added instance of lightning:navigation in Child cmp, updated its controller and Baby cmp Commented Aug 21, 2019 at 18:21

0

You must log in to answer this question.

Browse other questions tagged .