2

A component 1 redirect me to a component 2 and I'd like that in component 2, when I click on a return button, I'm redirected to component 1.

For navigate from component 2 to component 1, I use an event.

Component 2 :

<aura:registerEvent name="displayList" type="c.B_NavigateToList" />    
<button class="slds-button" onclick="{!c.goBack}">
    <lightning:icon iconName="action:back" size="small" class="icon" variant="bare"/>
</button>

The controller JS of component 2:

goBack : function(component, event, helper){
    console.log("retour vers la liste");
    var evt = $A.get("e.c:B_NavigateToList");
    evt.fire();
}

The event B_NavigateToList is a simple event with no parameter.

The main component, that display components 1 or 2, capturing the event :

<aura:handler event="c:B_NavigateToList" action="{!c.doInit}"/>

{!v.body}

Ant its controller method doInit :

doInit : function(component, event, helper) {
    $A.createComponent(
        "c:B_ContactComponent",
        {

        },
        function(newCmp){
            if (component.isValid()) {
                component.set("v.body", newCmp);
            }
        }
    );
},

So when I'm on the component 2 and I click on the return button, I got a javascript error :

rerender threw an error in 'markup://aura:expression' [Cannot read property 'childNodes' of null] Failing descriptor: {markup://aura:expression}

EDIT

I change the controller JS of component 2 like that :

goBack : function(component, event, helper){
    console.log("retour vers la liste");
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:B_ContactComponent",
    });
    evt.fire();
}

And now when I click the return button I don't get any error but nothing happen and I stay on component 2 instead of being redirected to component 1 (named "B_ContactComponent" ).

  • The {!c.goBack} action in your button, what does it call ? Where is it used ? Because i see that you do your call to another component in your doInit and that's not the way to implement the lightning component navigation if I'm not mistaken – Simon Govaert Mar 9 '17 at 8:50
  • Sorry I forgot to paste the code of controller JS, I updated my post with the goBack method – dou Mar 9 '17 at 8:52
0

EDIT

Well I tried it in many ways, I ended up with an undefined event in the controller. It's still in beta...

So I went for the proven way, following this guide.

The idea is that your main component has a {!v.body}, and registers to events handling the navigation. B_NavigateToList event of type Application for example.

<aura:handler event="c:B_NavigateToList" action="{!c.navigateToListAction}"/>

In the main component controller, you should implement this function

navigateToListAction: function(component,event,helper) {
  $A.createComponent(
     "c:B_ContactComponent",
     {
       "res" : event.getParam("result")
     },
     function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
     }
  );
}

In your Component 2, consider implementing this function in the controller

goBack: function(component, event, helper) {
    var evt = $A.get("e.c:B_ContactComponent");
    evt.fire();
},

When the user clicks on the goBack in the component B, it fires the event B_NavigateToList, which will be caught by the main component. And rerender the body.

Hope this helps


Old solution not working (yet):

Why not use the (new/beta) feature force:navigateToComponent ?

Little example :

goBack: function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:Component1"
    });
    evt.fire();
}

It requires that the component is marked with access="global" or a component within the current namespace. And as it is a standard event of Lightning, it doesn't require the extras from using a custom event (no event creation, no handler, etc.).

Source

But a raised question yesterday explained that this feature also overwrites the whole page (the lightning component is treated as the unique component to show). So if you use your lightning component in a page containing already other components, it's maybe not what you're looking for

  • I just tried that with my component, when I click the button there's no more error, but it don't redirect me to the first component... – dou Mar 9 '17 at 9:15
  • @dou Did you make sure the component is marked as "global" ? The component 1 ? If there no typo in the call of the function ? I edited my answer to reflect more your use case. Check it out – Simon Govaert Mar 9 '17 at 9:20
  • yes I put access="global" in the component 1, and my method is exactly the same as yours, with a console.log inside it. And when I click the button I see the log (so the method is reached) but nothing else happens – dou Mar 9 '17 at 9:23
  • @dou Edit The Question what you have tried now may be it helpful to resolve your issue – vignesh Mar 9 '17 at 9:28
  • @vignesh I edited my post – dou Mar 9 '17 at 9:41

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.