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

Angular组件生命周期是指一个组件从创建到销毁的整个生命周期，包含了多个钩子函数，可以在不同的组件生命周期阶段执行不同的操作，让我们更好地控制组件的行为。本文将详细讲解Angular组件生命周期的一部分，包括OnInit、OnChanges、DoCheck等常用的钩子函数。

OnInit

OnInit是一个当Angular组件初始化时会自动执行的钩子函数。在这个函数中，我们可以执行一些初始化操作，比如从后台获取数据、初始化变量等。示例如下：

@Component({
  selector: 'my-component',
  template: '<p>{{ title }}</p>'
})
export class MyComponent implements OnInit {
  title: string;

  ngOnInit() {
    this.title = 'Hello, World!';
  }
}

在上面的示例中，我们通过实现OnInit接口并初始化title变量，使得组件在初始化时会显示“Hello, World!”字符串。

OnChanges

OnChanges是一个当Angular组件输入属性更改时会自动执行的钩子函数。在这个函数中，我们可以获取到输入属性的新值和旧值，并执行一些响应式操作。示例如下：

@Component({
  selector: 'my-component',
  template: '<p>{{ message }}</p>',
})
export class MyComponent implements OnChanges {
  @Input() message: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log(`Old value: ${changes.message.previousValue}`);
    console.log(`New value: ${changes.message.currentValue}`);
  }
}

在上面的示例中，我们通过实现OnChanges接口和@Input装饰器，使得组件在输入属性更改时会在控制台输出新旧属性的值。

DoCheck

DoCheck是一个当Angular组件的变更检测机制被触发时会自动执行的钩子函数。在这个函数中，我们可以执行一些自定义的变更检测操作，比如检测数组和对象的变化等。示例如下：

@Component({
  selector: 'my-component',
  template: '<p *ngFor="let item of items">{{ item }}</p>',
})
export class MyComponent implements OnInit, DoCheck {
  @Input() items: string[];

  ngOnInit() {
    this.items = ['foo', 'bar', 'baz'];
  }

  ngDoCheck() {
    console.log('Change detected!');
  }
}

在上面的示例中，我们通过实现OnInit和DoCheck接口和@Input装饰器，使得组件在初始化时会初始化items数组，在DoCheck函数中会检测该数组是否发生变化，如果发生变化，则会在控制台输出“Change detected!”消息。

通过以上三个钩子函数的示例，我们可以更好地理解Angular组件生命周期，并在实际的开发中使用它们来控制组件的行为。