面试题：Angular中组件生命周期钩子函数的理解与应用

Question

请详细说明Angular组件生命周期钩子函数ngOnInit、ngOnChanges、ngOnDestroy的作用以及使用场景。假设你有一个数据列表组件，当列表数据发生变化时，你会在哪个钩子函数中处理相关逻辑，为什么？

Answer 1

ngOnInit

• 作用：在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。该方法只会在组件初始化时调用一次。
• 使用场景：用于需要在组件初始化时执行的操作，比如从服务器获取数据、初始化变量、订阅服务等。例如在一个用户信息展示组件中，在ngOnInit中调用服务获取用户详细信息并展示。

ngOnChanges

• 作用：当Angular（重新）设置数据绑定输入属性时响应。该钩子会在组件初始化时以及输入属性值发生变化时被调用。
• 使用场景：用于处理输入属性变化时需要执行的逻辑。比如在一个图表组件中，当传入的图表数据（输入属性）发生变化时，在ngOnChanges中重新绘制图表。

ngOnDestroy

• 作用：在Angular销毁指令/组件之前调用。用于执行清理操作，例如取消订阅可观察对象、释放资源等，防止内存泄漏。
• 使用场景：在一个订阅了实时数据更新的组件中，在ngOnDestroy中取消订阅，避免在组件销毁后仍继续接收数据更新导致错误。

数据列表组件数据变化处理

当列表数据发生变化时，应该在ngOnChanges钩子函数中处理相关逻辑。原因是ngOnChanges会在组件输入属性（即列表数据）发生变化时被调用，适合用于响应这种数据的改变，而ngOnInit仅在组件初始化时调用一次，无法处理后续数据变化；ngOnDestroy是在组件销毁时调用，与数据变化无关。