0

I developed a child lightning component which is used from a parent lightning component.

I mean that the parent lightning component calls the child lightning component and give to it a value which is a parameter in the child lightning component. The value is an Id.

My problem is that the value (Id) in the init method of the child lightning controller is null.

But if I display the value in the view of the child lightning component, it is OK, the value is not null.

Can someone explain me why?

The init method of the child lightning component is run before the init method of the parent lightning component?

This is my code.

Parent LightningCntroller

({
  init: function (component) {
// Get cookies
const opportunityName = "opportunityId";
var name = opportunityName + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');

for(var i = 0; i <ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0) == ' ') {
    c = c.substring(1);
  }
  if (c.indexOf(name) == 0) {
    const opportunityId = c.substring(name.length, c.length);
    component.set("v.opportunityIdToUse", opportunityId);
  }
}
}
})

Parent Lightning Component

<c:Cart opportunityId="{!v.opportunityIdToUse}" />

Child Lightning Component

<aura:component controller="CartCtrl" implements="forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" value="{!this}" action="{!c.init}" />

<aura:attribute name="opportunityId" type="String" default=""/>

{!v.opportunityId} => the value is not null

</aura:component>

Child JS Controller

({
  init: function (component) {
        console.log("valeur cart", component.get("v.opportunityId")); => value is null
        ...
    }
})
  • You can format your code by selecting it and pressing Ctrl-K or clicking the {} button in the editor. – David Reed Feb 21 '19 at 18:14
  • I don't have the button and if I press Ctrl-K, the url of my browser opens itself. :( – Aurélien Laval Feb 21 '19 at 18:17
  • @AurélienLaval I have formatted the post for you, so you may like to review the changes as how it was done, so that you can utilize it in future. As for your question, it's not clear if the init function of Child is actually called during Child's initialization. We'll need to see a bit of more code of the Child Component. – Jayant Das Feb 21 '19 at 18:22
  • I added the controller of the parent lightning component in my first post. – Aurélien Laval Feb 21 '19 at 18:35
  • I dont't have lot of code in the child component. – Aurélien Laval Feb 21 '19 at 18:54
1

What you are experiencing is the expected behavior.

If you have a nested component (which is your case here), the init of the nested component gets fired before the containing component.

So as you instantiate the child component in the parent component using <c:Cart opportunityId="{!v.opportunityIdToUse}" />, it invokes the init of child first.

Now, you are only setting the value of opportunityIdToUse in the parent's init function, it would have never been made available in child's init.

The below links should help to understand this behavior in details:

| improve this answer | |
  • Ok thank you, I understand, I will update my code to match with that. Thank you. – Aurélien Laval Feb 21 '19 at 20:15

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.