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 等。你可以根據需要在組件類中實現這些鉤子。