Angular 角度：AfterViewInit（）与AfterContentInit（）比较

我试图准确地理解是什么导致

AfterViewInit（）

和

AfterContentInit（）

生命周期挂钩触发。

从官方文件中可以看出

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

上面写着

Angular将外部内容投影到组件后的Angular调用

这两种说法在我看来已经几乎无法区分了子视图不是与外部内容相同吗？

例如： parent.component.html

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

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

在parent.component.ts中，我希望在调用

AfterViewInit（）

或

AfterContentInit（）

之前等待子组件完全呈现。当我运行这段代码时，它会按照正确的顺序发生，即首先调用

AfterContentInit（）

，然后调用

AfterViewInit（）

。目前，子组件未接收到大量数据，但最终可能会接收到，并且渲染时间会更长（数据将在激活后增长）

---

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

如果您在中开始一些动态组件加载或手动视图创建，这将变得更有意义棱角分明

当组件的

@输入

s和

@输出

s已解析时，

OnInit

被调用一次

附加组件视图后，将调用AfterViewInit。记住Angular将所有视图编译为JS文件，而不是html文件——该框架用代码管理模板，并有一个与DOM交互的渲染引擎。除了实际呈现组件外，Angular还需要递归地构建和管理组件绑定及其生命周期方面的子/父关系。子组件还需要解析其绑定，并经历与其父组件相同的渲染生命周期。简单地说，在这个钩子处，

@ViewChild

和

@ViewChildren

将被解析——子组件将被完全初始化，它们的属性将可用

AfterContentInit

有点奇怪。当组件的子视图和外部内容已附加时，将调用它。这来自内容投影，通常是

标记。这是渲染器需要执行的另一个步骤，即在将所有投影内容附着到断开连接的视图之前，解析树下的所有投影内容。如果你没有在模板或

上乱搞，你真的不需要担心它。这里将解析

@ContentChild

和

@ContentChildren

---

至于您提到的竞争条件，如果您使用的是正确的生命周期钩子来满足需要，则无需担心——它们只是在

@Input

s、

@ViewChildren

之后立即调用的钩子，组件上已经设置了

@ContentChildren

——注入属性的竞争条件不应该通过控制反转来改变检测（非框架因素无法承受）：

这是在angular.io Im上使用stripe和card.mount（）演示的图像不在DOM中渲染。我检查是否拉入了API，如果是，则呈现页面。但是卡片元素没有呈现？任何人我把它放在AfterContentInit和Afterviewinit中，仍然。。。无法渲染。有线索吗？Thanks@Gel您可以使用setter包装

@ViewChild（）

。例如，

@ViewChild（'some-el'，{static:false}）设置someEl（value:ElemenrRef）{mountStripe（value.nativeElement）}