Angular 2 生命周期挂钩

Angular 2 项目中有各种不同的生命周期事件，它们为我们提供了在组件生命周期中执行某些操作的能力。这些事件被称作生命周期挂钩。

在本文中，我们将探讨 Angular 2 中的生命周期挂钩，以及如何在组件的生命周期中使用它们。

生命周期图

下面是 Angular 2 组件生命周期的图示：

生命周期挂钩

Angular 2 提供了以下生命周期挂钩：

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

ngOnChanges

ngOnChanges 挂钩会在组件的输入属性（Input）发生变化时触发。我们可以在组件内部使用 ngOnChanges 以检测输入属性的变化并进行相应的逻辑处理。

这里有一个简单的例子，演示了如何在组件内使用 ngOnChanges：

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

@Component({
  selector: 'example-component',
  template: '<p>{{ greeting }}</p>'
})
export class ExampleComponent implements OnChanges {
  @Input() name: string;
  greeting: string;

  ngOnChanges(changes: SimpleChanges) {
    this.greeting = `Hello, ${changes.name.currentValue}`;
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它包含一个输入属性 name。当 name 属性发生变化时，ngOnChanges 会被调用，并将新的值传递给它。在这个例子中，当 ngOnChanges 被调用时，它会将当前值与一个字符串拼接，最后将结果赋值给 greeting 属性。

ngOnInit

ngOnInit 挂钩会在组件初始化时被调用，这意味着它是在第一次 ngOnChanges 调用之后执行的。 ngOnInit 可以用来执行一些初始化任务，例如从服务器加载数据。

这里有一个简单例子，演示了如何在组件内使用 ngOnInit：

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

@Component({
  selector: 'example-component',
  template: '<p>{{ greeting }}</p>'
})
export class ExampleComponent implements OnInit {
  greeting: string;

  ngOnInit() {
    this.greeting = 'Hello, world!';
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，当组件初始化时，ngOnInit 被调用。在这个例子中，当 ngOnInit 被调用时，它会简单地将一个字符串赋值给 greeting 属性。

ngDoCheck

ngDoCheck 挂钩会在 Angular 变更检测器运行之后被调用。这个挂钩在每个变更检测周期中执行一次，因此我们可以在这个挂钩中执行一些特殊的处理逻辑。 例如，在这个挂钩中进行表单验证或处理某些事件。

这里有一个简单的例子，演示了如何在组件内使用 ngDoCheck：

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

@Component({
  selector: 'example-component',
  template: '<p>{{ greeting }}</p>'
})
export class ExampleComponent implements DoCheck {
  greeting: string;

  ngDoCheck() {
    this.greeting = 'Hello, world!';
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它包含 ngDoCheck 挂钩。在这个例子中，ngDoCheck 被调用时，它会将一个字符串赋值给 greeting 属性。

ngAfterContentInit

ngAfterContentInit 挂钩会在组件的内容（Content）投影插入父组件时被调用。这个挂钩只会被调用一次。

这里有一个简单的例子，演示了如何在组件内使用 ngAfterContentInit：

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

@Component({
  selector: 'example-component',
  template: '<ng-content></ng-content>'
})
export class ExampleComponent implements AfterContentInit {
  @ContentChild(SomeComponent) child: SomeComponent;

  ngAfterContentInit() {
    console.log(this.child);
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它包含 ngAfterContentInit 挂钩。对于组件中的所有内容投影标记，Angular 会在这个挂钩被调用时将它们插入到父组件中，并将包含的组件作为子组件注入到 child 属性中。

ngAfterContentChecked

ngAfterContentChecked 挂钩会在组件的内容（Content）投影与子组件的视图和绑定更新之后被调用。这个挂钩在每个变更检测周期中执行多次。

这里有一个简单的例子，演示了如何在组件内使用 ngAfterContentChecked：

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

@Component({
  selector: 'example-component',
  template: '<some-component></some-component>'
})
export class ExampleComponent implements AfterContentChecked {
  @ContentChild(SomeComponent) child: SomeComponent;

  ngAfterContentChecked() {
    console.log(this.child);
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它包含 ngAfterContentChecked 挂钩。在这个例子中，ngAfterContentChecked 被调用时，它会将 child 属性输出到控制台中，以显示子组件是否被正确注入。

ngAfterViewInit

ngAfterViewInit 挂钩会在组件视图初始化完成之后被调用。这个挂钩只会在组件的视图和其所有子组件的视图完成初始化后被调用。

这里有一个简单的例子，演示了如何在组件内使用 ngAfterViewInit：

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

@Component({
  selector: 'example-component',
  template: '<some-component #child></some-component>'
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('child') childComponent: SomeComponent;

  ngAfterViewInit() {
    console.log(this.childComponent);
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它包含 ngAfterViewInit 挂钩。在这个例子中，ngAfterViewInit 被调用时，它会将 childComponent 属性输出到控制台中，以显示子组件是否被正确注入。

ngAfterViewChecked

ngAfterViewChecked 挂钩会在组件的视图与其所有子组件的视图都进行完一次变更检测之后被调用。这个挂钩在每个变更检测周期中执行多次。

这里有一个简单的例子，演示了如何在组件内使用 ngAfterViewChecked：

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

@Component({
  selector: 'example-component',
  template: '<some-component #child></some-component>'
})
export class ExampleComponent implements AfterViewChecked {
  @ViewChild('child') childComponent: SomeComponent;

  ngAfterViewChecked() {
    console.log(this.childComponent);
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它包含 ngAfterViewChecked 挂钩。在这个例子中，ngAfterViewChecked 被调用时，它会将 childComponent 属性输出到控制台中，以显示子组件是否被正确注入。

ngOnDestroy

ngOnDestroy 挂钩会在组件销毁前被调用。在这个挂钩中，我们可以执行一些清理任务，例如取消订阅或释放资源。

这里有一个简单的例子，演示了如何在组件内使用 ngOnDestroy：

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

@Component({
  selector: 'example-component',
  template: '<p>{{ greeting }}</p>'
})
export class ExampleComponent implements OnDestroy {
  subscription: Subscription;
  greeting: string;

  constructor(private service: SomeService) {
    this.subscription = this.service.someObservable$
      .subscribe(message => {
        this.greeting = message;
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

在上面的代码中，我们创建了一个组件 ExampleComponent，它依赖于一个名为 SomeService 的服务，并订阅了该服务中的一个 Observable。在组件销毁之前，ngOnDestroy 挂钩会被调用，并在这个例子中取消订阅 Observable。

结论

Angular 2 提供了多个生命周期挂钩，它们为我们提供了在组件生命周期中执行某些操作的能力。这些挂钩可以用于执行初始化任务、进行表单验证、处理事件等。我们应该了解这些挂钩的生命周期图，以便更好地了解它们的执行过程和使用时机。