Angular 生命周期钩子

介绍

当我们创建任何 Angular 组件时，我们通常会在其typescript文件ngOnInit()中看到默认创建的方法，那到底是什么？或者，如果在整个应用程序加载之前加载组件时我们想做任何类型的调整，那么最好的地方是什么？

我们将在这篇博客中讨论这些类型的事情，或者简而言之，我们将讨论 Angular Life-cycle Hooks。

Angular 生命周期钩子

以下是 Angular 框架提供的生命周期钩子：

1. ngOnChanges
2. ngOnInit
3. ngDoCheck
4. ngAfterContentInit
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngOnDestroy

当任何角度组件加载到内存中时，所有这些钩子都会按照上述顺序一个接一个地执行。

我们将一一详细讨论所有这些钩子。

1. ngOnChanges：这是唯一一个使用参数的生命周期钩子。这个生命周期钩子是组件加载时第一个被执行的钩子。之后，如果用 @input 装饰器装饰的属性值发生任何变化，则执行此钩子。@input 修饰属性意味着当我们将某些东西从父组件传递给子组件时。是的，这意味着对于此特定操作，组件之间必须存在父子关系。
   它接受的参数是SimpleChanges 类型这种类型基本上包含 3 个属性：currentValue、previousValue 和 firstChange。currentValue 和previousValue 保存属性的当前值和先前值，第三个属性firstChange 指定该属性是否是第一次更改。
2. ngOnInit：这个生命周期钩子只执行一次，那是组件初始化的时候。此钩子仅在 ngOnChanges 之后的执行周期内执行，而不是在任何操作上执行。通常，我们在这个生命周期钩子中对最初需要的数据进行外部 API 调用。
3. ngDoCheck：当在组件中检测到任何更改时，将执行此生命周期挂钩。首先它在钩子的执行周期中执行，然后在组件中的任何更改检测中执行。该更改可以是任何内容，例如单击按钮或属性的任何更改等。
4. ngAfterContentInit：这个生命周期钩子在钩子的执行周期中的 ngDoCheck 之后被触发，除此之外，只要有从父组件到子组件的内容投影。我们利用<ng-content>来使用该内容。

<comp>projected Data</comp>

<ng-content></ng-content>

1. 无论我们将在哪里使用这个 <ng-content>在子组件中，我们都会从那里获得来自父组件的投影数据。
2. ngAfterContentChecked：这个生命周期钩子在 ngAfterContentInit 之后在钩子的执行周期中被触发，除此之外，每当从父组件到子组件的投影内容发生变化时。在上面的示例中，我们正在投影硬编码值投影 Data，而不是如果有任何属性在运行时被绑定并被更改，这将使这个投影数据发生变化并触发这个生命周期钩子。
3. ngAfterViewInit：这个生命周期钩子在钩子的执行周期中的 ngAfterContentChecked 之后被触发。这个钩子在组件初始化时被触发。
4. ngAfterViewChecked：这个生命周期钩子在钩子的执行周期中的 ngAfterViewInit 之后被触发。当组件及其关联的子组件被初始化时，这个钩子会被触发。
5. ngOnDestroy：这是钩子执行周期中的最后一个生命周期钩子，在 ngAfterViewChecked 钩子之后执行。这个钩子从内存中销毁/删除组件及其相关对象。每当我们离开组件时，这个钩子就会执行。

注意：

• 我们可以在组件的typescript文件中直接使用这些钩子及其名称，但根据最佳编码实践，我们必须在使用这些钩子时在类中实现相应生命周期钩子的接口。接口名称与钩子名称相同，但“ng”除外，例如ngOnInit 的接口名称为OnInt，ngOnChanges 的接口名称为OnChanges，以此类推。
• 通常，人们认为构造函数是 Angular Life-cycle Hooks 的一部分，但请记住，构造函数是类而不是 Angular 提供的特性，所以这两者是分开的，构造函数不是 Angular Life-cycle Hooks 的一部分。