如何在AngularJS中管理組件的生命周期鉤子

在AngularJS中，組件的生命周期是由一系列預定義的鉤子（hook）組成的

1. $onInit(): 當組件初始化完成時調用。這是執行初始化邏輯的最佳地方，例如設置默認值或從服務器獲取數據。此鉤子在$controller注入之后調用。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>My Component</div>',
  $onInit() {
    console.log('MyComponent initialized');
  }
});

2. $onChanges(changesObj): 當組件的輸入屬性發生變化時調用。此鉤子接收一個包含所有變化屬性的對象。你可以在這里執行依賴于輸入屬性變化的邏輯。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>{{$ctrl.message}}</div>',
  bindings: {
    message: '<'
  },
  $onChanges(changesObj) {
    if (changesObj.message) {
      console.log('Message changed from', changesObj.message.previousValue, 'to', changesObj.message.currentValue);
    }
  }
});

3. $onDestroy(): 當組件被銷毀時調用。這是執行清理操作的好地方，例如取消事件監聽器或釋放資源。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>My Component</div>',
  $onDestroy() {
    console.log('MyComponent destroyed');
  }
});

4. $doCheck(): 當組件的輸入屬性或其子組件發生變化時調用。此鉤子通常用于執行更細粒度的依賴跟蹤。它比$onChanges()更早被調用，但可能會在某些情況下導致性能問題。因此，除非有特殊需求，否則建議避免使用此鉤子。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>{{$ctrl.message}}</div>',
  bindings: {
    message: '<'
  },
  $doCheck() {
    console.log('Doing deep check');
  }
});

注意：在AngularJS 1.x中，組件的概念與其他框架（如React或Vue）中的組件概念略有不同。在AngularJS 1.x中，我們使用指令（directives）來實現類似組件的功能。然而，上述生命周期鉤子同樣適用于AngularJS中的指令。