Angular 生命周期

Angular 是一个主流且广泛分类的客户端平台，给数百万开发者留下了深刻印象。自 Angular 平台问世以来，构建应用程序比以往任何时候都更加容易。Angular 被广泛用于数据可视化和构建移动和桌面应用程序。它能够无缝利用数据的潜力，使其在同类产品中独树一帜。随着每年新增的功能，Angular 已经抓住了市场趋势，并且 Angular 的生命周期每年都在快速发展。

早在 2009 年，当 Google 推出 Angular 时，它具有有限的生命周期依赖和功能，最初是作为在 HTML 和 JavaScript 上提供的倡议。然而，在最新版本中，TypeScript 已取代了之前的 JavaScript 和其他流行的脚本语言。从另一个角度看，Angular 使开发者能够构建运行在Web、移动和桌面上的应用程序，并且占用的空间更小。现在让我们讨论 Angular 生命周期的一些其他方面。

什么是 Angular 生命周期？

在 Angular 中，每个组件在其生命周期中都经过 8 个不同的阶段。确切地说，它首先被初始化，然后创建根组件，并随后呈现给它的组件。在应用程序开发过程中，当组件加载时，它总是会被检查并逐渐更新。当组件不再使用时，它会通过销毁和将其从DOM中移除来进入死亡阶段。

有趣的是，Angular 可以监督其组件和指令的所有生命周期，并能巧妙地理解与先前数据的相关性，从而使应用程序的集成顺畅。总而言之，组件构成了版本的主要构建块，而指令则通过构建来引导这些版本。

关于 Angular 生命周期，另一件有趣的事情是，每个组件都有自己的生命周期，并且在每个阶段，生命周期都从初始化到销毁。每个组件都经历 8 个阶段。这些步骤可以用以下几点来解释。

1. 在初始化任何 Angular 生命周期组件时，它会创建并呈现给其根组件，根组件旨在被传递给后代。
2. 下一阶段涉及在应用程序开发过程中加载的组件，数据绑定技术会逐渐被更改和更新。
3. 后面的部分涉及未使用的组件，这些组件未被使用，将进入死亡阶段并从 DOM 中移出。

带有钩子的生命周期概述

在 Angular 中，组件生命周期中发生的所有事件都称为“生命周期钩子”。钩子本质上是开发者可以在 Angular 应用程序中随时调用的简单函数。您可以将钩子视为回调方法，它们会触发组件生命周期中发生的积极事件。如前所述，八个阶段极大地决定了 Angular 的生命周期。让我们来了解一下它们。

构造函数与OnInit

作为一名程序员，生成组件并介绍它非常重要。您始终需要考虑两个选项，即使用构造函数或使用 OnInt 生命周期方法。每当使用组件时，OnInit 生命周期方法都会自动触发。

尽管构造函数和 OnInt 方法都可以用于相同的目的，但开发者更喜欢使用 ngOnInit 进行声明或初始化，并且大多数时候避免使用构造函数。

Interface

接口是生命周期方法中钩子的重要资产，因为应用程序的组件类必须在虚拟接口中实现。根据建议，触发实现的 AfterViewInit 方法应该适用于 ngAfterViewInit。

ngOnchanges

这是一个回调函数，用于绑定组件的数据属性变化。简单来说，您可以将其视为一个事件，每当组件内的输入控件更新时就会执行。当 Angular 接收到更改的数据时，它会被映射，并且当前数据和先前数据被封装在一个简单的更改中。因此，通过使用这些生命周期钩子，父组件可以轻松地与子组件通信，前提是该装饰器暴露给子组件的 @InputDecorator。即使父组件偏离了输入属性，这个钩子也会自动调用子组件。这使得开发者可以减少对实现细节的担忧。因此，它的一些属性包括利用所有具有输入的组件，在输入更改时调用，并在 ngOnInit 之前引发初始调用。

此阶段的属性包括所有输入组件的实际利用，每当值更改时调用，并在 ngOnInit 之前引发初始调用。

ngOnInit

在 Angular 完成创建和介绍回调后，它将被初始化并显示一些数据绑定的属性。此事件仅在 ngOnChanges 事件和构造函数调用之后发生。通过这个钩子，组件的逻辑被初始化，并且 ongOnInit 的所有属性都可以使用。在钩子触发之前，这些属性的任何子项都不能使用。

此阶段的一些属性包括组件钩子初始化。一旦设置了输入，钩子就会被调用，并且 Angular CLI 会为所有组件默认添加它。需要注意的是，所有这些操作都只发生一次。

ngDoCheck

在此阶段处理完钩子后，仍然需要审查与组件和指令相关的输入和属性。您可以在此处轻松检查您的逻辑。确切地说，您可以放入自定义检查以查看测试用例，然后将它们实现到组件中。这个钩子在 ngOnInit 之后很有用，它的主要功能是即使组件属性没有改变也会执行。如果 Angular 在任何情况下未能检测到输入属性的更改，这个钩子就会出现。此钩子的一些属性包括变更检测和自动函数调用。

ngAfterContentInit

此阶段在 ngDoCheck 完成后被触发。ngAfterContentInit 中的每个组件都会首次被引入和检查。通常，当 Angular 执行一些内容投影和组件视图后，会实现此方法。当属性被标记为 ContentChild 或 ContentChildren 时，就会调用此方法，以确保所有这些都已初始化。另一方面，可以通过放置 <ng-content> 和 </ng-content> 标签来使用该方法包含外部子组件。因此，对于所有生命周期组件，此钩子仅被调用一次。此阶段的一些属性可能包括内容未初始化，因为它发生在 ngDoCheck 之后。

ngAfterContentChecked

此钩子方法旨在利用 Angular 的变更检测机制检查内容的变化。即使没有进行任何修改，它也会执行其任务，确保一切都得到检查并且一切正常。此钩子在 ngAfterContentInit 之后被调用，并在每次执行 ngDoCheck 后自动执行。它在子组件初始化中起着至关重要的作用。

此方法的一些主要属性包括等待 ngContentInit 执行，并确保一切仅在 ngDoCheck 之后执行。

ngAfterViewInit

此生命周期方法在 ngAfterContentChecked 之后调用，并且仅用于组件。此方法与 ngAfterContentInit 类似，并且仅在组件和子视图之后调用。此方法仅在视图初始化后调用，并且只调用一次。

ngAfterViewChecked

当有后续检查、组件检查和子视图时，会触发此方法。此方法在 ngAfterViewInit 之后调用，然后通过 ngAfterContentChecked 进行检查。与上面讨论的一些其他生命周期方法一样，此方法仅用于组件，并且在子组件等待执行时非常有用。

此方法的一些属性是，在初始化和检查完成后会调用一次，并且在 ngAfterContentCheck 方法之后，它开始执行。

ngOnDestroy

当 Angular 销毁所有指令或组件时，会调用此方法。这是清理所有已构建逻辑并退订可观察对象的正确位置。它会分离所有事件处理器，并且仅用于消除内存泄漏或缓冲区相关的问题。

此钩子的一种主要功能或属性是，在组件从 DOM 中移除后会被调用。

结论

Angular 中的组件在应用程序开发中起着重要作用。自从 Angular 出现以来，它有很多依赖项，并且实现钩子相当困难。尽管如此，由于当今发生的巨大进步，Angular 的生命周期方法已被划分为本文中介绍的各个阶段。您了解了不同类型的 Angular 生命周期方法以及驱动这些方法顺利运行并随之而来的钩子。

由于组件被认为是 Angular 应用程序的主要构建块，因此理解生命周期处理方法非常重要，以便它们可以在您的应用程序中轻松实现。