Angular系列教程之生命周期钩子

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

@[toc]

前言

Angular是一种流行的前端开发框架，它提供了许多功能强大且易于使用的工具和特性。其中之一就是生命周期钩子（Lifecycle Hooks），它们允许我们在组件的不同生命周期阶段执行自定义代码。本文将介绍Angular的生命周期钩子以及如何使用它们。

什么是生命周期钩子？

生命周期钩子是一些用于在组件生命周期中被调用的方法。它们可以让我们在组件创建、更新和销毁等不同的生命周期阶段执行自己的逻辑。通过使用生命周期钩子，我们可以更好地控制组件的行为，并在需要时执行必要的操作。

常用的生命周期钩子

Angular生命周期钩子可以分为三个阶段：创建、更新和销毁。在每个阶段，都有一组可用的钩子函数，用于执行相应的任务。

创建阶段

在创建阶段，Angular创建组件，并将其插入到视图中。这个阶段有两个钩子函数：ngOnChanges和ngOnInit。

• ngOnChanges钩子函数：在组件的输入属性发生变化时调用。它接收一个SimpleChanges对象，该对象包含了变化的信息，我们可以通过这个对象来获取输入属性的新值和旧值。

• ngOnInit钩子函数：在组件初始化时调用。这个钩子函数通常用于执行一些初始化任务，比如获取数据、设置默认值等。

下面是一个示例代码：

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

@Component({
  selector: 'app-demo',
  template: '<h1>{{title}}</h1>'
})
export class DemoComponent implements OnChanges, OnInit {
  @Input() name: string;
  title: string;

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

  ngOnInit() {
    console.log('ngOnInit');
    this.title = Hello, ${this.name}!;
  }
}

在这个示例代码中，我们定义了一个DemoComponent组件，它有一个输入属性name和一个title属性。ngOnChanges钩子函数用于在输入属性发生变化时输出变化的信息，ngOnInit钩子函数用于在初始化时设置title属性的值。

更新阶段

在更新阶段，Angular检测到组件的状态发生变化，并更新视图。这个阶段有两个钩子函数：ngDoCheck和ngAfterContentChecked。

• ngDoCheck钩子函数：在每个变更检测周期中调用。这个钩子函数通常用于执行自定义的变更检测逻辑，比如手动检测输入属性的变化等。

• ngAfterContentChecked钩子函数：在组件的内容发生变化后调用。这个钩子函数通常用于执行一些与组件内容相关的任务，比如更新组件的样式等。

下面是一个示例代码：

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

@Component({
  selector: 'app-demo',
  template: '<h1>{{title}}</h1>'
})
export class DemoComponent implements DoCheck, AfterContentChecked {
  @Input() name: string;
  title: string;

  ngDoCheck() {
    console.log('ngDoCheck');
    // 手动检测输入属性的变化
    if (this.name !== this.title.substring(7, this.title.length - 1)) {
      this.title = Hello, ${this.name}!;
    }
  }

  ngAfterContentChecked() {
    console.log('ngAfterContentChecked');
    // 更新组件的样式
    const h1 = document.getElementsByTagName('h1')[0];
    h1.style.color = 'red';
  }
}

在这个示例代码中，我们定义了一个DemoComponent组件，它有一个输入属性name和一个title属性。ngDoCheck钩子函数用于手动检测输入属性的变化并更新title属性的值，ngAfterContentChecked钩子函数用于更新组件的样式。

销毁阶段

在销毁阶段，Angular销毁组件，并清理与组件相关的资源。这个阶段有一个钩子函数：ngOnDestroy。

• ngOnDestroy钩子函数：在组件被销毁时调用。这个钩子函数通常用于清理组件所占用的资源，比如取消订阅、断开连接等。

下面是一个示例代码：

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

@Component({
  selector: 'app-demo',
  template: '<h1>{{title}}</h1>'
})
export class DemoComponent implements OnDestroy {
  @Input() name: string;
  title: string;
  subscription: Subscription;

  constructor(private service: DataService) {
    this.subscription = this.service.getData().subscribe(data => {
      console.log(data);
    });
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
    // 取消订阅
    this.subscription.unsubscribe();
  }
}

在这个示例代码中，我们定义了一个DemoComponent组件，它有一个输入属性name和一个title属性，还有一个订阅数据的subscription属性。ngOnDestroy钩子函数用于在组件被销毁时取消订阅。

结论

生命周期钩子是Angular框架提供的一个强大工具，可以让我们更好地控制和管理组件的生命周期。

本文介绍了几个常用的生命周期钩子，并提供了示例代码进行解释说明。

希望通过本文的介绍，读者能够更好地理解和应用Angular的生命周期钩子。