Angular:AfterViewInit()vs AfterContentInit()

Question

我想了解到底是什么原因导致AfterViewInit()和AfterContentInit()生命周期挂钩火.

来自官方角度文档,它说为AfterViewInit()

角色调用后会创建组件的子视图

它说AfterContentInit()

Angular将Angular项目外部内容投入到组件中后进行Angular调用

这两个陈述似乎对我来说几乎无法区分.儿童观点与外部内容不一样吗？

例如: parent.component.html

<div class="parent">
  <child-comp></child-comp>
</div>

其中child-comp是包含大量标记并依赖于异步数据的子组件.

在parent.component.ts中,我想等到子组件完全呈现后再调用AfterViewInit()或AfterContentInit().当我运行这个代码时,它会按照确切的顺序发生,Angular会AfterContentInit()先调用它,然后再调用它 AfterViewInit().目前,child-comp没有接收到大量数据,但最终它可以并且渲染需要更长时间(数据将在实时生长).

我现在担心的是因为我的数据是有限的,并且加载时间如此之快,通过选择一个生命周期钩子而不是另一个我可能不情愿地最终处于竞争状态 - 一旦数据增加并且加载时间减速就会失败.

Answer 1

如果你在Angular中开始一些动态组件加载或手动视图创建,这将开始变得更有意义.

OnInit在组件的@Inputs和@Outputs已经解析时调用一次.

AfterViewInit在附加组件的视图时调用.请记住,Angular将所有内容编译为JS文件,而不是html - 框架在代码中管理模板,并具有与DOM交互的呈现引擎.在这里,@ViewChild并且@ViewChildren将得到解决.

AfterContentInit有点怪异.在附加组件的子视图和外部内容时调用它.这来自内容投影,通常是<ng-content>标签.如果你没有弄乱模板或者你,你真的不需要担心它<ng-content>.这里@ContentChild和@ContentChildren将得到解决.