详解Angular组件生命周期(一)

Angular组件生命周期是Angular框架用来管理组件生命周期的一种机制，用于确保组件能够在运行时按照正确的顺序进行初始化、渲染、销毁等操作。在这篇文章中，我们将详细讲解Angular组件的生命周期。本章主要介绍组件的构造以及ngOnChanges的生命

Angular组件生命周期是Angular框架用来管理组件生命周期的一种机制，用于确保组件能够在运行时按照正确的顺序进行初始化、渲染、销毁等操作。在这篇文章中，我们将详细讲解Angular组件的生命周期。本章主要介绍组件的构造以及ngOnChanges的生命周期函数。

组件的构造

每当Angular框架需要实例化一个组件时，都会根据组件定义创建一个新的类实例。然后，Angular框架会自动调用组件类的构造函数。组件类的构造函数即是组件的构造函数，在其中可以进行一些必要的初始化操作。

下面是一个示例代码，展示了在组件的构造函数中进行一些必要的初始化操作：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log('AppComponent constructor');
  }
}

在上面的代码中，我们在AppComponent的构造函数中打印一条log，并将其输出到控制台。当我们运行这个代码时，我们会发现在控制台上打印出了一条信息：

AppComponent constructor

这说明我们的构造函数已经被成功调用了。

ngOnChanges

ngOnChanges函数是组件生命周期中重要的一个函数，它是Angular框架用来监测组件属性变化的钩子函数。当组件的输入属性发生变化时，ngOnChanges函数会被自动调用。

下面是一个示例代码，展示了如何使用ngOnChanges函数监测组件属性变化：

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

@Component({
  selector: 'app-child',
  template: '<div>{{message}}</div>',
})
export class ChildComponent implements OnChanges {
  @Input() message: string;

  constructor() {}

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h3>Parent Component</h3>
      <p><input [(ngModel)]="parentMessage"></p>
      <p>{{parentMessage}}</p>
      <h3>Child Component</h3>
      <app-child [message]="parentMessage"></app-child>
    </div>
  `,
})
export class AppComponent {
  parentMessage = 'Hello World';
}

在上面的代码中，我们定义了一个父组件AppComponent和一个子组件ChildComponent。父组件AppComponent定义了一个message属性，并且将该属性绑定到了子组件ChildComponent的message输入属性上。子组件ChildComponent中，我们定义了一个ngOnChanges函数用来监测子组件的输入属性变化。当父组件AppComponent中message属性发生变化时，ngOnChanges函数会被自动调用，并将变化信息输出到控制台上。

当我们运行这个代码时，我们会发现在控制台上打印出了一条信息：

ngOnChanges {message: SimpleChange}

这说明在父组件AppComponent中，我们成功地修改了message属性的值，并且该变化被自动传递到了子组件ChildComponent中，触发了ngOnChanges函数的调用。