ngOnInit(),ngAfterViewInit(),ngafterContentInit(),ngAfterViewChecked()和构造函数()之间有什么区别？

Question

ngOnInit(),ngAfterViewInit(),ngafterContentInit(),ngAfterViewChecked()和构造函数()之间有什么区别？我们如何在Angular 2中实现它们？他们的目的和用途是什么？实施它们的所有方面都有用吗？

谢谢.

Answer 1

这些是生命周期钩子,您可以利用它们来执行操作和组件生命周期的不同时间.

官方角度文档中有关于该主题的优秀指南:https://angular.io/guide/lifecycle-hooks

组件具有由Angular管理的生命周期.

Angular创建它,渲染它,创建和渲染它的子节点,在数据绑定属性发生变化时检查它,并在从DOM中删除它之前销毁它.

Angular提供生命周期钩子,可以提供对这些关键生命时刻的可见性以及在它们发生时采取行动的能力.

官方文档中的下图描述了生命周期钩子的顺序:

Answer 2

建设者

这是一个Angular实例化组件时触发的类构造函数。它主要用于DI，在Angular运行更改检测之前被调用。你可以在这里读更多关于它的内容：

• Angular中的Constructor和ngOnInit之间的本质区别

ngOnInit（），ngAfterViewInit（），ngafterContentInit（），ngAfterViewChecked（）

这些是生命周期挂钩。它们的调用时间不同，因此每个数据都可用。文章中清楚地显示了与变更检测中的其他操作有关的时间：

您需要了解的有关Angular中变更检测的所有信息

顺序已明确定义：

1. OnChanges 如果绑定发生更改，子组件上的生命周期挂钩

@Input绑定发生更改时通知。如果您需要不断跟踪这些绑定，请使用它。

2. OnInit并且ngDoCheck在子组件上（OnInit仅在第一次检查时调用）

通知@Input绑定可用。如果您不需要不断跟踪这些绑定，请使用它。

3. AfterContentInit和AfterContentChecked子组件实例上的生命周期挂钩（AfterContentInit仅在第一次检查时调用）

通知Angular对投影内容（ng-content）进行更改检测。如果需要使用@ContentChildren装饰器查询投影元素，请使用它。

4. AfterViewInit和AfterViewChecked子组件实例上的生命周期挂钩（AfterViewInit仅在第一次检查时调用）

通知Angular对视图内容运行更改检测。如果需要使用@ViewChildren装饰器查询视图元素，请使用它。

关于ngDoCheck生命周期挂钩有很多困惑。要了解更多信息，请阅读如果您认为ngDoCheck您的组件正在检查中，请阅读此文章。