与 ngOnInit() 和 ngAfterContentInit() 混淆答案

【问题标题】：confused with ngOnInit() and ngAfterContentInit()与 ngOnInit() 和 ngAfterContentInit() 混淆
【发布时间】：2020-03-02 12:11:21
【问题描述】：

我是 Angular 的新手，如果我的问题听起来很愚蠢，很抱歉。我总是对 ngOnInit() 和 ngAfterContentInit() 生命周期钩子感到困惑。在官方文档中，它说：

ngOnInit() : 在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。

ngAfterContentInit()：在 Angular 将外部内容投射到组件的视图/指令所在的视图后响应。

我的问题是：

Q1-对于ngOnInit()，在Angular首次显示数据绑定属性后初始化指令/组件是什么意思？ “初始化”是否意味着创建指令/组件的实例？

Q2-对于ngAfterContentInit()，组件的视图是什么意思？视图是指组件的templateUrl中关联的模板html吗？

【问题讨论】：

标签： javascript angular

【解决方案1】：

Q1：不，类实例的创建是发生在ngOnInit()之前的方法constructor，组件是带有模板@987654321的指令@，视图节点等。 ngOnInit() 在数据绑定属性准备好后调用，如您所知，ngAfterViewInit() 在视图准备好后调用。

Q2：我举了一个例子来说明“内容”的含义：

您在 app.component.html 中定义了一个组件选择器，其中包含一个文本：

<custom-component>
   Some random text
</custom-component>

现在在custom-component.component.hml 中，您可以使用<ng-content></ng-content> 显示文本“一些随机文本”，它充当您传递的文本的占位符

<ng-content></ng-content>

ngAfterContentInit() 仅表示将“一些随机文本”传递到custom-component.component.hml 视图已完成。

【讨论】：

【解决方案2】：

A1) 首先你需要知道什么是数据绑定属性。这个答案问题应该对您有所帮助：

What is data-bound properties?

首先创建的是constructor()构造函数在ngOnInit()之前

https://angular.io/guide/lifecycle-hooks

A2) 是的，视图要么是 xxx.component.html 要么是 component.ts 文件中的模板

https://dev.to/devpato/displaying-data-in-angular-unofficial-docs-4nd4

What is the difference between ngAfterContentInit and ngAfterViewInit?

【讨论】：