DEV Community
·
Angular 组件生命周期
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
Angular 生命周期钩子是开发者在组件的关键时刻调用的方法，包括初始化、变化和销毁。常用的钩子有构造函数、ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterViewInit 和 ngOnDestroy，帮助管理组件的不同阶段行为。
🎯
关键要点
- Angular 生命周期钩子允许开发者在组件生命周期的关键时刻调用方法，包括初始化、变化和销毁。
- 常用的生命周期钩子包括构造函数、ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked 和 ngOnDestroy。
- 构造函数在页面首次加载时调用，仅调用一次，用于初始化依赖注入和设置变量。
- ngOnChanges 在组件的输入属性发生变化时被调用，提供 SimpleChanges 对象以获取前后值。
- ngOnInit 在组件初始化后调用，适合设置组件的状态。
- ngDoCheck 用于手动检测变化，在每个变化检测周期中调用。
- ngAfterContentInit 在内容投影到组件后调用。
- ngAfterContentChecked 在每次检查投影内容后调用，使用时需谨慎以避免性能问题。
- ngAfterViewInit 在组件的视图及其子视图初始化后调用，适合初始化第三方库或进行 DOM 操作。
- ngAfterViewChecked 在每次检查组件的视图及其子视图后调用。
- ngOnDestroy 在组件销毁前调用，用于清理资源，如取消订阅。
- 通过理解和有效使用这些钩子，可以管理组件在不同生命周期阶段的行为。
❓
延伸问答
Angular 生命周期钩子有哪些常用的类型？
常用的生命周期钩子包括构造函数、ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked 和 ngOnDestroy。
ngOnInit 钩子的主要用途是什么？
ngOnInit 钩子在组件初始化后调用，适合设置组件的状态。
ngOnChanges 钩子是如何工作的？
ngOnChanges 钩子在组件的输入属性发生变化时被调用，提供 SimpleChanges 对象以获取前后值。
ngOnDestroy 钩子有什么重要性？
ngOnDestroy 钩子在组件销毁前调用，用于清理资源，如取消订阅。
如何使用 ngDoCheck 钩子？
ngDoCheck 钩子用于手动检测变化，在每个变化检测周期中调用，适合自定义变化检测逻辑。
Angular 生命周期钩子如何影响组件的性能？
某些钩子如 ngAfterContentChecked 使用时需谨慎，以避免性能问题，因为它们在每次检查后都会被调用。
➡️
