何时为动态加载的角度组件触发 OnInit 事件？

Posted 2023-03-13

【中文标题】何时为动态加载的角度组件触发 OnInit 事件？

【英文标题】：When is OnInit event triggered for a dynamically loaded angular component?

【发布时间】：2019-10-18 23:50:38

【问题描述】：

我正在使用以下代码动态加载 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()之后调用？

【参考方案1】：

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

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

一旦新视图附加到树上，Angular 就可以在更改检测阶段对其进行检查。

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

您可以为创建的视图手动触发更改检测：

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 

【讨论】：

这节省了我数小时的调试时间

【参考方案2】：

来自the documentation：

在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。

在第一个 ngOnChanges() 之后调用一次。

这意味着一旦完成插值并设置输入，它就会被调用。