Angular 组件生命周期初学者指南-js教程-PHP中文网

A Beginner’s Guide to Angular Component Lifecycles

在深入研究生命周期挂钩之前，对一些核心主题有基本的了解至关重要。根据 Angular 文档：

先决条件

在使用生命周期钩子之前，您应该对以下内容有基本的了解：

TypeScript 编程

Angular 应用程序设计基础知识，如 Angular 概念中所述

一旦您熟悉了这些先决条件，您就可以探索 Angular 提供的强大的生命周期钩子了。

Angular 组件生命周期是 Angular 组件如何创建、更新和销毁的核心。了解这些生命周期使开发人员能够控制组件在其整个生命周期中的行为，从而增强功能和用户体验。在本文中，我们将分解 Angular 组件生命周期挂钩，提供示例并解释其典型用例。

Angular 中的生命周期钩子是什么？

Angular 提供了多个生命周期钩子，开发人员可以利用这些钩子在组件生命周期的不同阶段执行特定代码。从初始化组件到销毁它，这些钩子帮助管理组件的状态、行为和资源清理。

这是 Angular 中所有生命周期钩子的列表：

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

每个钩子都有特定的用途，并在组件生命周期的特定时间被调用。让我们深入了解每一个。

1、ngOnChanges

用途：输入属性更改时调用。

这是构建组件后调用的第一个生命周期钩子。每次输入属性的值发生变化时都会触发 ngOnChanges 方法。当您想要执行代码以响应组件绑定输入属性的更改时，它特别有用。

示例：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

登录后复制

2.ngOnInit

用途：在组件第一次 ngOnChanges 之后调用一次。

ngOnInit 钩子是大部分初始化代码所在的地方。这是初始化属性、设置任何所需订阅或进行组件所依赖的 HTTP 调用的好地方。

示例：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

登录后复制

3.ngDoCheck

用途：在每次更改检测运行期间调用。

ngDoCheck 钩子允许您实现自己的变更检测算法。这对于跟踪 Angular 本身无法检测到的对象的深层变化非常有用。不过，请谨慎使用，如果使用不当，可能会影响性能。

示例：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ data }}</p>`
})
export class SampleComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Data changed:', changes.data.currentValue);
  }
}

登录后复制

4.ngAfterContentInit

用途：在第一次 ngDoCheck 之后调用一次。

这个钩子在 Angular 将外部内容投影到组件中后被调用。它对于用于在模板中包含外部内容的组件特别有用。

示例：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ info }}</p>`
})
export class SampleComponent implements OnInit {
  info: string;

  ngOnInit(): void {
    this.info = 'Component initialized!';
  }
}

登录后复制

5.ngAfterContentChecked

用途：每次检查投影内容后调用。

每次 Angular 检查投影到组件中的内容时都会执行 ngAfterContentChecked 生命周期钩子。它与 ngAfterContentInit 类似，但在每个更改检测周期后运行。

示例：

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>{{ count }}</p>`
})
export class SampleComponent implements DoCheck {
  count: number = 0;

  ngDoCheck(): void {
    console.log('Change detection running');
    this.count++;
  }
}

登录后复制

6.ngAfterViewInit

用途：在第一个 ngAfterContentChecked 之后调用一次。

此生命周期挂钩用于在组件的视图（以及任何子视图）初始化后执行操作。它通常用于在 Angular 渲染视图的子视图后操作或读取它们的属性。

示例：

import { Component, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentInit {
  ngAfterContentInit(): void {
    console.log('Content projected');
  }
}

登录后复制

7.ngAfterViewChecked

用途：每次检查组件视图后调用。

这个钩子在 Angular 检查组件视图的更新后被调用。它与 ngAfterViewInit 类似，但在每个更改检测周期后运行。这可用于应用依赖于视图中更新的逻辑。

示例：

import { Component, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<ng-content></ng-content>`
})
export class SampleComponent implements AfterContentChecked {
  ngAfterContentChecked(): void {
    console.log('Projected content checked');
  }
}

登录后复制

8.ngOnDestroy

用途：在 Angular 销毁组件之前调用。

ngOnDestroy 钩子是执行清理任务的地方，例如取消订阅可观察对象、分离事件处理程序或释放可能导致内存泄漏的资源。

示例：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p #textElement>Hello, world!</p>`
})
export class SampleComponent implements AfterViewInit {
  @ViewChild('textElement') textElement: ElementRef;

  ngAfterViewInit(): void {
    console.log('View initialized:', this.textElement.nativeElement.textContent);
  }
}

登录后复制