Angular 生命周期钩子

作者 : 慕源网 本文共1740个字,预计阅读时间需要5分钟 发布时间: 2022-01-24 共150人阅读

介绍

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

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

Angular 生命周期钩子

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 的一部分。

慕源网 » Angular 生命周期钩子

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录