1. 首页

译:详解Angular生命周期完全指南

译:详解Angular生命周期完全指南 Angular是一个流行的、广泛使用的客户端平台框架,近年来赢得了数百万开发人员的青睐. 随着Angular的出现,web和移动应用的构建变得非常简单。每年都会有新版本出现,Angular的生命周期也在不断演变。

该框架是由谷歌于2009年推出. Angular团队 的第一个项目AngularJS非常受欢迎,依赖于HTML和JavaScript。然而,在后期的版本,你可能发现JavaScript已经被TypeScript和其他现代脚本语言所取代。

Angular使开发人员更自由的开发运行在web端,移动端和桌面端的应用程序。随着时间的推移,Angular经历了许多修改,并在AngularJS之后引入了许多版本,直到Angular7,而且还在不断更新。

什么是Angular生命周期?

每个Angularjs版本在其生命周期中都会经历不同的阶段。组件在Angular中有决定性的作用。这里我将谈论angular组件生命周期 以及它们如何影响所有版本的生命周期,无论是第一个版本还是最后一个版本。为了开发过程的流畅性,Angular管理它的所有组件。 与任何自然生命周期一样,每个组件都有自己的生命周期事件,比如出生、生命事件和死亡。

值得注意的是,Angular本身监控着Angular组件和指令的所有生命周期, 您必须了解生命周期,并牢记其结果,才能使您的应用程序顺利进行。下面我将分享的信息适用与组件和指令。

组件是任何Angular版本的主要构建块。因此,理解它们,理解组件生命周期的处理步骤,变得极为重要,只有这样,它才能在应用程序的开发中实现。

在Angular中,你会注意到最令人兴奋的事情是,每个组件都有一个生命周期,生命周期的每个阶段都是从初始化到销毁。组件生命周期通常经历八个不同的阶段。

当Angular组件被初始化的时候,它创建并显示其根组件。 然后设计并产生了它的子组件。对于在应用程序开发过程中加载的所有组件,它会一直检查数据绑定属性何时更改和更新。当组件不再使用时,它将接近死亡阶段,然后被抽取并从DOM中删除。有时,在发生这些事件时,您可能需要编写一些额外的代码。我试图最自然的展示组件的生命周期,现在让我们详细说明。

生命周期钩子概览

组件生命周期中的事件也称为“生命周期钩子”。您可能对术语生命周期钩子感到不舒服,但它只是开发人员可以在Angular应用程序中组件生命周期的特定时刻调用的简单函数。我们还可以说这些生命周期钩子是Angular在组件生命周期中发生肯定事件时引发的回调方法。在组件或指令的生命周期中有8种不同的钩子。

你可以从Angular核心库中导入钩子函数,将一些独特的组件合并到应用程序的生命周期中。开发人员可以通过实现Angular核心库中的一个或多个钩子接口来抓住生命周期中的关键时刻。钩子事件可以包含在应用程序的任何阶段,以获得对组件更好的控制。

例如:引入由Angular调用ngOnInit钩子函数的一个组件。

  • 在组件输入属性改变的时候,Angular将调用ngOnChange。

  • 在组件销毁的时候,Angular将调用ngOnDestroy。

组件是TypeScript类,这就是为什么必须将每个组件都视为构造方法的主要原因。在生命周期钩子事件中,首先执行组件类的构造函数。要将依赖项注入组件,必须使用构造函数。 Angular首先执行构造函数,然后显式执行所有其他生命周期钩子方法。

Angular Components_Lifecycle Hooks

Constructor VS OnInit

作为一名开发人员,您必须生成并引入组件。为此,您必须选择两个选项,要么使用构造函数,要么使用OnInit生命周期方法。随着组件的初始化,OnInit生命周期方法将被触发。

使用哪种方法是由自己的决定,但是许多人认为他们更喜欢使用ngOnInit进行声明或初始化,并且尽量不使用构造函数。

接口

接口是连接到生命周期方法的基本工具,因为应用程序的组件类需要实现基本接口。至于视图的引入,应该触发实现接口的方法是“AfterViewInit”,用于实现该接口的方法是“ngAfterViewInit”。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

ngOnchanges

当组件的数据绑定属性发生变化时,或者简单地说,当组件内的输入控件得到更新时,就会执行这个回调函数。Angular接收一个更改后的数据映射,该数据映射包含数据绑定属性的当前和以前的位置,并封装在一个简单的更改中。

如果子组件使用了公开的属性装饰器@Input,则使用这个生命周期钩子,父组件可以轻松地与其子组件通信。即使父元素偏离了输入属性,这个钩子也会在子组件中被调用。开发人员使用这个钩子来发现有关已更改的输入属性的详细信息,以及它是如何更改的。

属性:

  • 实际上,它可用于所有具有输入的组件。

  • 每当输入值更改时调用。

它在ngOnInit之前调用。

ngOnInit

当Angular完成组件的创建和引入时,这个回调函数也会被初始化为Angular显示数据绑定属性。此事件仅在ngOnChanges事件之后和构造函数之后获得其调用。使用这个钩子,您可以初始化组件的逻辑。如前所述,这个钩子在ngOnChanges之后获得初始化,这意味着ngOnInit的所有属性都可以使用它的所有属性。在此钩子被触发之前,不能使用子指令的任何属性。

属性:

  • 这个钩子初始化组件数据。

  • 在设置输入值之后,这个钩子被调用。

  • 默认情况下,Angular CLI会将这个钩子添加到所有组件中。

  • 它仅调用一次。

ngDoCheck

每当Angular 自身无法捕获组件或指令的变更输入属性时,就需要使用这个钩子函数。你甚至可以使用这个回调来进行逻辑检查。简而言之,通过这个钩子,您可以实现在组件中的自定义检查逻辑。

这个钩子在ngOnInit之后立即随需应变,即使组件的属性没有变化,这个钩子也有它的执行职责。如果Angular错误地检测输入属性中的任何变化,就会出现这个钩子来拯救它。

属性:

  • 由Angular运行以检测任何更改。

  • 用来进行变化检测。

ngAfterContentInit

当第一次引入和检查组件的每个内容时,ngAfterContentInit将在ngDoCheck之后调用。只要Angular在组件视图中做了任何内容投影,就会实现这个方法。当属性被明确划分为ContentChild和ContentChildren并被完全初始化时,也会调用此方法。

Angular可以在标签中使用这种方法包含外部子组件。在组件的整个生命周期中,这个钩子只获得一次调用。

属性:

  • 在最初调用ngDoCheck之后。

  • 它被用来初始化内容。

ngAfterContentChecked

这个钩子方法通过使用Angular变化检测机制来检查组件内容的修改,即使没有任何修改,它仍然会被执行。它在ngAftercontentInit之后获得调用,并且在每次执行ngDoCheck之后执行。它在子组件的初始化过程中扮演着重要的角色。

属性:

  • 这个方法等待ngContentInit完成后才开始执行。

  • 在所有ngDocheck之后执行。

ngAfterViewInit

这个生命周期方法在ngAfterContentChecked之后调用,并仅在组件上查找它。这与ngAfterContentInit非常相似,它只在所有组件视图及其子视图之后调用。

属性:

  • 在视图初始化之后,它只调用一次。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

ngAfterViewChecked

这个Angular生命周期方法在检查组件视图和子视图时被触发。这个方法在ngAfterViewInit之后调用,并且为每个ngAfterContentChecked方法调用。和上面讨论的许多其他生命周期钩子一样,它也只适用于组件。

当等待子组件的某些东西时,这个组件可能会有帮助。

属性:

  • 检查和初始化完成后,将调用它。

  • 在每个ngAfterContentChecked方法完成后,这个方法就开始执行。

ngOnDestroy

这个生命周期钩子在Angular销毁所有组件或指令之后调用。在这里使用清理逻辑,取消所有可观察对象的订阅,并分离事件处理程序,这样做可以防止内存泄漏。

属性:

  • 在从DOM中删除组件之前调用。

如何使用Angular生命周期钩子?

你应该做的事情如下:

  • 首先,必须导入钩子接口。

  • 在钩子接口中,应该声明组件或指令。

  • 接下来,您应该生成钩子方法。

导入钩子接口是最佳策略。

从核心模块导入钩子接口是必不可少的。不需要在名称前添加前缀。

export class SpyDirective implements OnInit, OnDestroy { ….}; @angular/core’;

这段代码取自 https://angular.io/guide/lifecycle-hooks_

组件实现生命周期钩子的声明:

在接下来的阶段中,您需要执行实现OnInit接口的组件。它的代码结构如下所示。

//export class AppComponent { ,

语法取自 c-sharpcorner.com_

创建钩子方法

必须记住的一件事是“钩子”和“钩子方法”有相似的名称。

就在组件生成的时候,钩子以下面描述的关联方式实现 –

Generating Hook Methods_1

但是,当创建带有子组件的组件时,会执行一些扩展。

Generating Hook Method_2

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

对于子组件,我们需要运行

Generating Hook Methods_1

这里,在ViewInit之后加入父类。

结论

在上面的文章中,我讨论了生命周期钩子及其在组件或指令的生命周期中发生的顺序。应该记住的一件事是,这些生命周期钩子同时适用于组件和指令。

作为一名开发人员,您必须知道组件在Angular中有多么重要,因此了解这些生命周期钩子同样非常重要。阅读本文之后,您已经了解了钩子以及它们在AngularJS开发的生命周期中扮演的角色。您应该谨慎使用这些钩子,因为您的项目可能不需要所有的钩子,所以选择您需要的钩子。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:译:详解Angular生命周期完全指南

链接:https://www.javascriptc.com/1908.html

« 真的,我发誓,永远都不会在代码中使用“User”这个单词!
JavaScript工作原理:渲染引擎及其性能优化»
Flutter 中文教程资源

相关推荐

QR code