Angular中组件和指令的生命周期挂钩是什么？

封面图 • 2025-10-26 • Angular

在 Angular 中，组件和指令都遵循一定的生命周期挂钩（Lifecycle Hooks），这些挂钩允许开发者在组件或指令的特定阶段执行自定义逻辑。以下是 Angular 提供的生命周期钩子及其作用：

---

### **1. ` ngOnChanges`**
- **触发时机**：当绑定到组件或指令的输入属性（`@Input`）发生变化时触发。
- **适用场景**：适合处理输入属性值的变化，比如重新计算数据或更新视图。
- **参数**：
  - `changes`: 一个包含所有变化属性的对象，每个属性对应当前值和上一次值。

---

### **2. `ngOnInit`**
- **触发时机**：在第一次调用 `ngOnChanges` 之后立即触发。
- **适用场景**：用于初始化组件或指令的数据、订阅服务等操作。
- **注意事项**：只会在组件或指令首次初始化时调用一次。

---

### **3. `ngDoCheck`**
- **触发时机**：每次变更检测周期运行时都会触发。
- **适用场景**：需要手动监控属性变化时使用，通常配合自定义变更检测器。
- **注意事项**：性能开销较大，建议仅在必要时使用。

---

### **4. `ngAfterContentInit`**
- **触发时机**：当组件或指令的内容投影（Content Projection）完成时触发。
- **适用场景**：适用于需要操作内容投影子元素的逻辑。
- **注意事项**：只会触发一次。

---

### **5. `ngAfterContentChecked`**
- **触发时机**：每次内容投影检查完成后触发。
- **适用场景**：用于检查内容投影子元素的状态或执行某些操作。
- **注意事项**：每次变更检测都会触发。

---

### **6. `ngAfterViewInit`**
- **触发时机**：当组件或指令的视图初始化完成后触发。
- **适用场景**：需要操作视图中的 DOM 元素时使用。
- **注意事项**：只会触发一次。

---

### **7. `ngAfterViewChecked`**
- **触发时机**：每次视图检查完成后触发。
- **适用场景**：用于检查视图中 DOM 元素的状态或执行某些操作。
- **注意事项**：每次变更检测都会触发。

---

### **8. `ngOnDestroy`**
- **触发时机**：当组件或指令被销毁时触发。
- **适用场景**：用于清理资源，例如取消订阅、清除定时器等。
- **注意事项**：确保在组件或指令生命周期结束时执行清理操作。

---

### **生命周期钩子的执行顺序**
以下是从组件或指令创建到销毁的完整生命周期顺序：
1. `ngOnChanges`
2. `ngOnInit`
3. `ngDoCheck`
4. `ngAfterContentInit`
5. `ngAfterContentChecked`
6. `ngAfterViewInit`
7. `ngAfterViewChecked`
8. 最终触发 `ngOnDestroy`

---

### **总结**
- **输入属性变化**：关注 `ngOnChanges` 和 `ngDoCheck`。
- **初始化阶段**：关注 `ngOnInit`、`ngAfterContentInit` 和 `ngAfterViewInit`。
- **清理阶段**：关注 `ngOnDestroy`。
- **通用检查**：`ngDoCheck` 和 `ngAfterViewChecked` 可用于自定义逻辑。

通过合理使用这些生命周期钩子，可以更高效地管理 Angular 应用中的组件和指令行为。