Angular 生命周期学习指南

Angular 是一个流行的前端框架，它提供了一系列的生命周期钩子，使得开发者可以更有效地管理组件的创建、更新和销毁过程。本指南将介绍 Angular 中的生命周期方法，并附有相关示例。

生命周期方法概述

Angular 组件的生命周期方法包括以下几个阶段：

创建阶段：ngOnInit、ngOnChanges
更新阶段：ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked
销毁阶段：ngOnDestroy

创建阶段

在组件创建阶段，Angular 会调用以下生命周期方法：

ngOnInit：在组件初始化时调用，通常用于获取数据或执行一些初始化操作。
ngOnChanges：在组件输入属性发生变化时调用，可以用来响应属性变化。

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

@Component({
  selector: 'app-example',
  template: `<h1>{{ title }}</h1>`
})
export class ExampleComponent {
  title = 'Angular 生命周期';

  ngOnInit() {
    console.log('组件已初始化');
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('属性已变化');
  }
}

更新阶段

在组件更新阶段，Angular 会调用以下生命周期方法：

ngDoCheck：在检测到数据绑定变化时调用，可以用来执行性能优化。
ngAfterContentInit、ngAfterContentChecked：在内容初始化和检查后调用。
ngAfterViewInit、ngAfterViewChecked：在视图初始化和检查后调用。

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

@Component({
  selector: 'app-example',
  template: `<h1>{{ title }}</h1><ng-content></ng-content>`
})
export class ExampleComponent implements AfterViewInit, AfterContentChecked {
  title = 'Angular 生命周期';

  ngAfterViewInit() {
    console.log('视图已初始化');
  }

  ngAfterContentChecked() {
    console.log('内容已检查');
  }
}

销毁阶段

在组件销毁阶段，Angular 会调用以下生命周期方法：

ngOnDestroy：在组件销毁前调用，可以用来清理资源或取消订阅。

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

@Component({
  selector: 'app-example',
  template: `<h1>{{ title }}</h1>`
})
export class ExampleComponent implements OnDestroy {
  title = 'Angular 生命周期';

  ngOnDestroy() {
    console.log('组件即将销毁');
  }
}

总结

Angular 生命周期方法提供了强大的工具来管理组件的整个生命周期。通过合理地使用这些方法，可以编写出更加高效和可维护的代码。

更多关于 Angular 的内容，请访问我们的Angular 教程页面。