浅谈angular2 组件的生命周期钩子

下面我会详细讲解“浅谈Angular2组件生命周期钩子”的攻略。

什么是组件生命周期钩子

组件生命周期钩子是Angular中的一组接口，用来监视组件中不同阶段的状态变化，以便在合适的时候执行相应的处理逻辑。它们分为两类：视图生命周期钩子和组件本身的生命周期钩子。组件生命期钩子被调用的顺序是固定的，具体如下：

// 组件实例化，分配内存空间，并设置默认属性
constructor()

// 初始化输入属性和组件指令，并收集依赖注入值
ngOnChanges()

// 依赖注入值已经准备就绪
ngOnInit()

// 视图已经初始化完毕
ngAfterViewInit()

// 组件销毁
ngOnDestroy()

视图生命周期钩子

ngAfterViewInit

当组件的视图初始化完毕时，会调用ngAfterViewInit生命周期钩子。此时，组件的所有视图相关属性（如ViewChild和ViewChildren）都已经初始化。这个钩子函数仅调用一次。

下面是一个示例：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular2 Example</h1>
    <p #myParagraph>{{ message }}</p>
  `
})
export class AppComponent {
  message: string = "This is a test message";

  @ViewChild('myParagraph') myParagraph: ElementRef;

  ngAfterViewInit() {
    console.log(this.myParagraph.nativeElement.innerText);
  }
}

在这个示例中，我们在组件模板中声明一个<p>元素，并给它起了一个名字myParagraph。我们还声明了一个ViewChild装饰器，通过它来获取视图中的<p>元素。当组件视图初始化完毕时，ngAfterViewInit钩子就会被触发，并打印出<p>元素的文字内容。

---

组件本身的生命周期钩子

ngOnChanges

当组件或指令的输入属性发生变化时，Angular会调用ngOnChanges生命周期钩子函数。我们可以通过它来对这些属性的变化做出响应。在控制台中打印出这些属性的变化可以帮助我们理解它们的生命周期。

下面是一个示例：

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

@Component({
  selector: 'app-child',
  template: `
    <p>Child Component</p>
    <p>Message: {{ message }}</p>
    <p>Count: {{ count }}</p>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Input() count: number;

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

在这个示例中，我们创建了一个ChildComponent组件，并在它上面定义了两个输入属性：message和count。我们还实现了ngOnChanges钩子函数，在控制台中打印输入属性的变化。当父组件改变message和count这两个属性值时，都会触发ngOnChanges函数。

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular2 Example</h1>
    <app-child [message]="message" [count]="count"></app-child>
    <button (click)="onButtonClick()">Click me!</button>
  `
})
export class AppComponent {
  message: string = "Hello world!";
  count: number = 0;

  onButtonClick() {
    this.message = "Hello Angular2!";
    this.count++;
  }
}

在这个示例中，我们在父组件的模板中使用了app-child组件，并给它传递了message和count两个属性值。我们也声明了一个onButtonClick函数，当点击按钮时，会修改这两个属性值。

当我们打开控制台并点击按钮时，会看到下面的输出：

{
  "message": {
    "previousValue": "Hello world!",
    "currentValue": "Hello Angular2!",
    "firstChange": false,
    "isFirstChange": () => { return !this.firstChange },
  },
  "count": {
    "previousValue": 0,
    "currentValue": 1,
    "firstChange": false,
    "isFirstChange": () => { return !this.firstChange },
  }
}

以上就是浅谈Angular2组件生命周期钩子的完整攻略，希望对你有所帮助。