When is OnInit event triggered for a dynamically loaded angular component?

帅比萌擦擦* 提交于 2020-12-29 12:20:39

问题


I am dynamically loading an Angular component (MyComponent) with the following code. I am also passing some data to the component after creating it.

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
this.viewContainerRef.clear();
let componentRef = this.viewContainerRef.createComponent(componentFactory);

(<MyComponent>componentRef.instance).setData(data);

When will the OnInit lifecycle event of the MyComponent be triggered? Will it be triggered immediately after calling createComponent()? Or will it only be called after setData()?


回答1:


ngOnInit hook will be triggered on the next change detection cycle that covers dynamic component. By covering I mean that the view for dynamic component should be created and it should be attached to Angular change detection tree.

ViewContainerRef::createComponent method only attaches newly created View to the current view and renders it.

Once that new View is attached to the tree Angular can check it during change detection phase.

The next change detection phase starts once NgZone determines that there is no microtasks scheduled. For example, it will happen after your event handler or after http call.

You can manually trigger change detection for that created view:

const componentRef = this.target.createComponent(componentFactory);

componentRef.changeDetectorRef.detectChanges(); // ngOnInit will be called 

componentRef.instance.x = 3; // access this.x in ngOnInit will give you undefined

On the other hand, in your case ngOnInit will have access to any properties you passed in during setData call.

const componentRef = this.target.createComponent(componentFactory);

componentRef.instance.x = 3;

// somewhen later ngOnInit will be called 



回答2:


From the documentation :

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

Called once, after the first ngOnChanges().

This means it's called once the interpolation is done and the inputs are set.



来源:https://stackoverflow.com/questions/56427104/when-is-oninit-event-triggered-for-a-dynamically-loaded-angular-component

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!