Angular 指令生命周期详解

本文详细介绍了 Angular 指令的生命周期，并通过一个详细案例帮助你理解。

1. 指令生命周期概述

在 Angular 中，指令的生命周期包括几个关键的阶段，每个阶段都提供了特定的钩子函数，你可以在这些钩子函数中编写自定义逻辑。

• ngOnChanges：当 Angular 设置或重置数据绑定的输入属性时调用。
• ngOnInit：在 Angular 初始化指令/组件之后调用。只调用一次。
• ngDoCheck：检测输入属性的变化和执行自定义的变化检测。
• ngAfterContentInit：在 Angular 完成外部内容投影之后调用。
• ngAfterContentChecked：每次完成外部内容投影之后调用。
• ngAfterViewInit：在 Angular 初始化完组件视图及其子视图之后调用。
• ngAfterViewChecked：每次 Angular 完成组件视图及其子视图的检查之后调用。
• ngOnDestroy：在 Angular 销毁指令/组件之前调用。用于清理资源。

2. 实战案例：自定义指令

接下来，我们将通过创建一个简单的自定义指令来演示指令生命周期的各个阶段。

2.1 创建自定义指令

首先，我们使用 Angular CLI 创建一个新的指令：

ng generate directive highlight

这将生成一个名为 `highlight.directive.ts` 的文件。打开这个文件，添加生命周期钩子函数：

import { Directive, ElementRef, Input, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  @Input() appHighlight: string;

  constructor(private el: ElementRef) { }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges:', changes);
    this.highlightElement();
  }

  ngOnInit() {
    console.log('ngOnInit');
    this.highlightElement();
  }

  ngDoCheck() {
    console.log('ngDoCheck');
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit');
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked');
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.highlightElement();
  }

  ngAfterViewChecked() {
    console.log('ngAfterViewChecked');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
    // 清理逻辑
  }

  private highlightElement() {
    this.el.nativeElement.style.backgroundColor = this.appHighlight || 'yellow';
  }
}

2.2 使用自定义指令

现在，我们可以在模板中使用这个自定义指令了。打开 `app.component.html` 文件，添加以下代码：

<div appHighlight="lightblue">
  这个 div 被高亮了！
</div>

2.3 查看控制台输出

运行 Angular 应用，并查看浏览器的控制台。你会看到指令生命周期的各个钩子函数被依次调用，并且每个钩子函数的日志信息也会显示出来。

3. 总结

通过本文，我们了解了 Angular 指令生命周期的各个阶段，并通过一个实战案例演示了如何在这些阶段中编写自定义逻辑。希望这些知识能够帮助你更好地理解和使用 Angular 指令。