Question

我正在尝试确切地了解是什么导致AfterViewInit()和AfterContentInit()生命周期挂钩触发。

在官方Angular文档中，它表示AfterViewInit()

在创建组件的子视图后进行角调用

在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和@Input被解析后，

@Output被调用一次。

附加了组件视图后，将调用

AfterViewInit。请记住，Angular会将所有内容编译为JS文件，而不是html-框架以代码管理模板，并具有与DOM交互的渲染引擎。在这里，@ViewChild和@ViewChildren将得到解决。

AfterContentInit有点奇怪。附加了组件的子视图和外部内容后调用。这来自内容投射，通常是<ng-content>标签中。如果您不搞乱模板或<ng-content>，则真的不需要担心。 @ContentChild和@ContentChildren将在这里解决。

角度：AfterViewInit（）与AfterContentInit（）

1 个答案: