时间戳

首页 > 解决方案 > 角度：AfterViewInit() 与 AfterContentInit()

angular - 角度：AfterViewInit() 与 AfterContentInit()

问题描述

我试图准确了解导致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()or AfterContentInit()。当我运行这段代码时，它会按照 Angular 所说 AfterContentInit()的首先调用它的确切顺序发生，然后是AfterViewInit(). 目前 child-comp 没有接收到很多数据，但最终它可以接收并且需要更长的时间来渲染（数据一旦上线就会增长）。

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

标签： angular

解决方案

如果您已经开始在 Angular 中进行一些动态组件加载或手动视图创建，这将变得更有意义。

OnInit@Input当组件的s 和@Outputs 被解析时调用一次。

AfterViewInit在附加组件的视图时调用。请记住，Angular 将所有视图编译为 JS 文件，而不是 html - 该框架在代码中管理模板并具有与 DOM 交互的渲染引擎。除了实际渲染组件之外，Angular 还需要递归地构建和管理关于组件绑定及其生命周期的子/父关系。子组件也需要解析它们的绑定并经历与父组件相同的渲染生命周期。简单地说，在这个钩子上@ViewChild，@ViewChildren将被解决——子组件将被完全初始化，并且它们的属性将可用。

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

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

推荐阅读