0

I have a component that dynamically loads two possible components and switches between them (kind of like views in angular). While it does load the components correctly, what I'm seeing is that the nested component inside one of the components persists when switching between the two.

Parent Component

  <aura:component>
<aura:handler name="dialogEvent" event="c:DialogSelectionEvent" action="{!c.handleDialogSelectionEvent}"/> 
        <div>
            {!v.body}
        </div>

 </aura:component>

DialogComponent1

<aura:component >

    <aura:registerEvent name="dialogEvent" type="c:DialogSelectionEvent"/>

    <div>
        <ui:button class="btn btn-primary btn-lg" press="{!c.makeNewItem}" label="Start a new item"/>
    </div>

    <c:MyItemsList />
</aura:component>

DialogComponent2

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" >

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:handler name="dialogEvent" event="c:DialogSelectionEvent" action="{!c.handleDialogSelectionEvent}"/>

    <div>
        {!v.body}
    </div>

</aura:component>

The view switching occurs in the helper of the parent component:

({
    doInit : function(component, event) {
        this.loadDialogComponent1(component);
    },
    handleDialogSelectionEvent : function(component, event){
        var params = event.getParams();

        if(params.eventType == 'Back' && params.to == 'Home'){
            this.loadDialogComponent1(component);
        }
        if(params.eventType == 'New Item'){
            this.loadDialogComponent2(component);
        }
    },
    loadDialogComponent1 : function(component){
        var type="c:DialogComponent1";
        this.createView(component, type, 'dialog1');
    },
    loadDialogComponent2 : function(component){
        var type="c:DialogComponent2";  
        this.createView(component, type, 'dialog2');
    },
    createView : function(component, type, id){
        var self = this;
        $A.createComponent(
                type,
                {"aura:id":id},
                (newComponent, status, errorMessage) => {
                    if(status === "SUCCESS"){
                    self.switchComponent(newComponent,component);
                    } else if(status === "INCOMPLETE"){
                        console.log("No response from server or client is offline.");

                    } else if(status === "ERROR"){
                        console.log("Error: "+errorMessage);
                    }
                });
    },
    switchComponent : function(newComponent, component){

        component.set("v.body", []);
        component.set("v.body", newComponent);
    },
})

As I said before, the components are being created correctly, but somehow that c:MyItemsList component persists partially. Specially, the markup for the list heading tags continues to stay on the body of the parent component even when I explicitly set the body to [].

Based on everything I'm seeing in the documentation, this should work. I would expect that the nested component of the DialogComponent1 is inside of the body of the ParentComponent, and that when I set the body to an empty array, it should be removing it. But that isn't the case. What am I missing? Is there a nuance about nested components that I need to be aware of?

  • Is it still visible, though? Just because a component is removed does not mean it is immediately destroyed. It should eventually be cleaned up by the framework later. – sfdcfox Feb 14 '18 at 17:52
  • yes, the <h3>Heading</h3> aspect of the component stays visible. The list items disappear, but for whatever reason that markup stays visible. – api-testuser45690 Feb 14 '18 at 18:01
  • The only weird thing I noticed is that newComponent should be an array: component.set("v.body", [newComponent]); – sfdcfox Feb 14 '18 at 18:10
  • I hoped it would be that simple, but alas.. :-/ I ended up specifically invoking component.destroy() in the helper of the dialog1 component, and that gets it off the page. – api-testuser45690 Feb 16 '18 at 2:57

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.