ngOnInit()、ngAfterViewInit()、ngafterContentInit()、ngAfterViewChecked() 和 constructor() 有什么区别？

Question

ngOnInit()、ngAfterViewInit()、ngafterContentInit()、ngAfterViewChecked( ) 和一个构造函数()？我们如何在 Angular 2 中实现它们？ 它们的用途和用途是什么？它在哪里对实施它们有用？

谢谢。

Answer 1

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

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

组件的生命周期由 Angular 管理。

Angular 创建它，渲染它，创建并渲染它的子节点， 当它的数据绑定属性改变时检查它，并销毁它 在将其从 DOM 中删除之前。

Angular 提供了生命周期钩子，提供对这些键的可见性 生活中的时刻以及在它们发生时采取行动的能力。

official documentation 中的下图描述了生命周期钩子的顺序：

Answer 2

构造函数

它是一个在 Angular 实例化组件时触发的类构造函数。它主要用于 DI，并在 Angular 运行更改检测之前调用。您可以在此处阅读更多信息：

• The essential difference between Constructor and ngOnInit in Angular

ngOnInit(), ngAfterViewInit(), ngafterContentInit(), ngAfterViewChecked()

这些是生命周期挂钩。它们的调用时间不同，因此它们中的可用数据也不同。变更检测中其他操作的时间安排在文章中清楚地显示：

Everything you need to know about change detection in Angular

顺序明确：

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

每当@Input 绑定发生变化时通知。如果您需要经常跟踪这些绑定，请使用它。

1. OnInit 和 ngDoCheck 在子组件上（OnInit 仅在第一次检查时调用）

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

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

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

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

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

关于ngDoCheck 生命周期钩子有很多困惑。要了解更多信息，请阅读If you think ngDoCheck means your component is being checked — read this article。