Angular 的生命周期钩子有哪些？

推荐答案

Angular 的生命周期钩子主要包括以下方法：

1. ngOnChanges: 当 Angular 设置或重新设置数据绑定的输入属性时响应。该方法接收一个 SimpleChanges 对象，包含当前和之前属性值的比较。
2. ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
3. ngDoCheck: 检测并在 Angular 上下文发生变化时执行自定义变更检测。
4. ngAfterContentInit: 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
5. ngAfterContentChecked: 每当 Angular 完成被投影内容的变更检测之后调用。
6. ngAfterViewInit: 当 Angular 初始化完组件视图及其子视图之后调用。
7. ngAfterViewChecked: 每当 Angular 完成组件视图和子视图的变更检测之后调用。
8. ngOnDestroy: 在 Angular 销毁指令/组件之前调用。通常用于取消订阅 Observable 和执行清理操作。

本题详细解读

Angular 的生命周期钩子允许开发者在组件的不同生命周期阶段执行自定义逻辑。理解这些钩子的调用时机和用途对于开发高效、可维护的 Angular 应用至关重要。

• ngOnChanges: 这个钩子在输入属性发生变化时被调用。它提供了一个 SimpleChanges 对象，可以用来比较新旧值。这对于需要根据输入属性变化来更新组件状态的场景非常有用。

• ngOnInit: 这是组件初始化时最常用的钩子。它通常用于执行一些初始化逻辑，比如从服务器获取数据或设置默认值。

• ngDoCheck: 这个钩子允许开发者手动检测变更。虽然 Angular 的变更检测机制非常强大，但在某些复杂场景下，开发者可能需要手动干预。

• ngAfterContentInit 和 ngAfterContentChecked: 这两个钩子与内容投影（Content Projection）相关。ngAfterContentInit 在内容投影完成后调用，而 ngAfterContentChecked 在每次内容投影变更检测后调用。

• ngAfterViewInit 和 ngAfterViewChecked: 这两个钩子与视图初始化相关。ngAfterViewInit 在视图初始化完成后调用，而 ngAfterViewChecked 在每次视图变更检测后调用。

• ngOnDestroy: 这个钩子在组件销毁前调用，通常用于清理资源，比如取消订阅 Observable 或清除定时器。

理解这些生命周期钩子的调用顺序和用途，可以帮助开发者更好地控制组件的行为，优化性能，并避免内存泄漏等问题。