Angular生命周期钩子怎么用

Angular 生命周期钩子是在 Angular 组件的生命周期的不同阶段自动调用的特殊方法。它们允许你在组件的不同阶段执行代码，例如初始化数据、订阅服务、清理资源等。要使用生命周期钩子，你需要在组件类中定义相应的方法。下面是一些常用的生命周期钩子及其使用方法：

1. ngOnChanges：当组件的输入属性（@Input）发生变化时，此方法会被调用。它接收一个简单对象，包含当前和之前的属性值。

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

@Component({
  selector: 'app-example',
  template: `...`
})
export class ExampleComponent implements OnChanges {
  @Input() data: any;

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

2. ngOnInit：在组件初始化时调用，仅在第一次创建组件实例时调用一次。这是初始化数据和服务订阅的好时机。

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

@Component({
  selector: 'app-example',
  template: `...`
})
export class ExampleComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    console.log('Component initialized');
  }
}

3. ngOnDestroy：在组件销毁之前调用，用于清理资源，如取消订阅、清除定时器等。

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

@Component({
  selector: 'app-example',
  template: `...`
})
export class ExampleComponent implements OnDestroy {
  private subscription: Subscription;

  constructor() {}

  ngOnDestroy() {
    this.subscription.unsubscribe();
    console.log('Component destroyed');
  }
}

4. ngAfterViewInit：在组件的视图（模板）初始化完成后调用。在这个钩子中，你可以访问和操作 DOM 元素。

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

@Component({
  selector: 'app-example',
  template: `...`
})
export class ExampleComponent implements AfterViewInit {
  ngAfterViewInit() {
    console.log('View initialized');
  }
}

这些只是 Angular 生命周期钩子的一部分。还有其他钩子，如 ngBeforeViewInit、ngAfterContentInit、ngAfterContentChecked、ngBeforeContentChecked 等。你可以根据需要在组件类中实现这些钩子。