1

I've got a little problem and thinking I might have designed my component a little incorrectly.

I'm storing quite a bit of state in an abstract extensible component for convenience. I've noticed if I update an attribute from my abstract component and then navigate to next screen that extends same component, the state is lost.

Now I could probably fetch state from server (in fact that is what happens if you load second screen from scratch), but init's don't really fire well when navigating from screen to screen using lightning:navigation.navigate().

Step1.cmp

<aura:component extends="c.Stepper">
    <lightning:navigation aura:id="navService"/>
    <lightning:card>
        foo: {!v.foo}
        <lightning:button label="Next" onclick="{!c.next}"/>
    </lightning:card>
</aura:component>

Step1Controller.js

next: function (component) {
        component.set('v.foo', 'qux');
        component
            .find('navService')
            .navigate(
                {
                    "type": "standard__component",
                    "attributes": {
                        "componentName": "c__Step2"
                    },
                    "state": {}
                }
            );
    }

Step2.cmp

<aura:component extends="c.Stepper">
    <lightning:card>
        foo: {!v.foo}
    </lightning:card>
</aura:component>

Stepper.cmp

<aura:component abstract="true"
                extensible="true"
                implements="lightning:isUrlAddressable">
    <aura:attribute type="String" name="foo" default="baz"/>
    {!v.body}
</aura:component>

Scenario: Open /lightning/cmp/c__Step1, click Next

Expected: foo: qux

Actual: foo: baz

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.