角度：AfterViewInit() 与 AfterContentInit()

Question

我正试图准确了解导致 AfterViewInit() 和 AfterContentInit() 生命周期挂钩触发的原因。

来自官方 Angular 文档，它说 AfterViewInit()

Angular 在创建组件的子视图后调用

上面写着AfterContentInit()

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 交互的渲染引擎。除了实际渲染组件之外，Angular 还需要递归地构建和管理关于组件绑定及其生命周期的子/父关系。子组件也需要解析它们的绑定，并与它们的父组件经历相同的渲染生命周期。简单地说，在这个钩子上，@ViewChild 和 @ViewChildren 将被解析——子组件将被完全初始化，并且它们的属性将可用。

AfterContentInit 有点奇怪。当组件的子视图和外部内容已附加时调用。这来自内容投影，通常是<ng-content> 标签。这是渲染器需要沿着树向下执行的另一个步骤，在将所有投影内容附加到脱节视图之前解析所有投影内容。如果您不使用模板或<ng-content>，您真的不需要担心它。这里@ContentChild和@ContentChildren会被解析。

至于您提到的竞争条件，如果您使用正确的生命周期钩子来满足需要，则无需担心——它们只是在 @Inputs 之后立即调用的钩子， @ViewChildren 和 @ContentChildren 已在组件上设置 - 注入属性的竞争条件不应通过控制反转来更改检测存在（非框架因素除外）:)