angular - 动态加载的 Angular 组件何时触发 OnInit 事件？

Question

我使用以下代码动态加载 Angular 组件 (MyComponent)。创建组件后，我还将一些数据传递给组件。

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

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

MyComponent的OnInit生命周期事件什么时候被触发？调用createComponent()后会立即触发吗？或者它只会在 setData() 之后调用？

Answer 1

ngOnInit 钩子(Hook)将在覆盖动态组件的下一个更改检测周期被触发。通过覆盖，我的意思是应该创建动态组件的 View ，并将其附加到 Angular 更改检测树。

ViewContainerRef::createComponent 方法仅将新创建的 View 附加到当前 View 并渲染它。

一旦新 View 附加到树上，Angular 就可以在更改检测阶段检查它。

一旦 NgZone 确定没有安排微任务，下一个更改检测阶段就会开始。例如，它将在事件处理程序之后或 http 调用之后发生。

您可以手动触发所创建 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

另一方面，在您的情况下，ngOnInit 将有权访问您在 setData 调用期间传入的任何属性。

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

componentRef.instance.x = 3;

// somewhen later ngOnInit will be called