问题
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