CODEWITHSUNDEEP
angular
almog
almog

Reputation: 838

ElementRef changed after click event

my scenario is as following: I have 3 components: MainComponent,ComponentA,ComponentB

MainComponent is dymamic loading ComponentA. ComponentA has a button that onClick call MainComponent.addComponent(ComponentB)

export class MainLayout
  {
    constructor(private dcl: DynamicComponentLoader,private elementRef:ElementRef) {
    ///this will work fine
    this.dcl.loadIntoLocation(ComponentA,elementRef);
    }


    addComponent(component:Type) {
     ///this will fail 
      this.dcl.loadIntoLocation(component, this.elememtRef,'child1');
    }
}

The error I am getting: You can see that the error is form the elementRef object....

Uncaught EXCEPTION: Error during evaluation of "click" ORIGINAL EXCEPTION: TypeError: Cannot read property '_view' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property '_view' of undefined at Object.internalView (http://localhost:63342/decisionApp/decision-modeling-ui/node_modules/angular2/bundles/angular2.dev.js:6236:19) at AppViewManager_.getNamedElementInComponentView (http://localhost:63342/decisionApp/decision-modeling-ui/node_modules/angular2/bundles/angular2.dev.js:11240:33) at DynamicComponentLoader_.loadIntoLocation (http://localhost:63342/decisionApp/decision-modeling-ui/node_modules/angular2/bundles/angular2.dev.js:14547:62) at MainLayout.resolveComponent (http://localhost:63342/decisionApp/decision-modeling-ui/app/playground/ui-composition/mainLayout.js:32:18) at ComponentsList.onClick (http://localhost:63342/decisionApp/decision-modeling-ui/app/playground/ui-composition/ComponentsList.js:25:20)

Upvotes: 1

Views: 496

Answers (2)

almog
almog

Reputation: 838

Ok I figured it out, The reason I had different objectRefs is that I set a providers:[MainComponent] at the ComponenetA config. this created for me a new instance of MainComponent. and therefore a new instance of ElementRef that was injected in the constructor.

Upvotes: 0

PowerStat
PowerStat

Reputation: 3821

Your describtion is not very clear, because you don't tell us the failure message and some other things about your components. So I can only guess:

Something of component, this.elememtRef,'child1' is not present at the time you call addComponent and so it will fail? Maybe ComponentA has not already been completly loaded? I also assume that "component" means ComponentB ?

Upvotes: 0

Related Questions