7

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

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

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

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

4

2 回答 2

20

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

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

一旦新视图附加到树上，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
于 2019-06-03T12:58:20.653 回答
2

从文档中：

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

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

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

于 2019-06-03T12:17:47.800 回答