1. 组件生命周期钩子函数执行顺序及作用
- ngOnChanges
- 执行顺序：当组件的输入属性（@Input()）发生变化时会触发，在组件初始化时也会触发一次。
- 作用：用于捕获和响应组件输入属性的变化。可以在此方法中根据新的属性值进行一些操作，例如重新计算某些值、发起新的HTTP请求等。
- ngOnInit
- 执行顺序：在组件第一次被创建后，ngOnChanges之后执行，只执行一次。
- 作用：用于组件的初始化操作，如初始化变量、订阅Observable、发起HTTP请求等。通常将组件启动时需要的一次性操作放在这里。
- ngDoCheck
- 执行顺序：在每次变更检测运行时执行，在ngOnChanges和ngOnInit之后，频率较高。
- 作用：用于实现自定义的变更检测逻辑。当Angular默认的变更检测机制无法满足需求时，开发者可以在这个钩子函数中手动检测和处理变化。
- ngAfterContentInit
- 执行顺序：当组件的内容（
<ng-content>）投影完成后执行，只执行一次。
- 作用：用于处理组件内容投影后的操作，例如访问投影进来的子组件或元素，并对其进行操作。
- ngAfterContentChecked
- 执行顺序：每次组件内容投影检查完成后执行，在ngAfterContentInit之后，频率较高。
- 作用：用于在每次内容投影检查后执行一些操作，例如检查投影内容的变化并做出相应反应。
- ngAfterViewInit
- 执行顺序：当组件的视图（包括子视图）初始化完成后执行，只执行一次。
- 作用：用于操作组件视图相关的元素或子组件，例如获取视图中的DOM元素，对其进行样式修改或绑定事件等。
- ngAfterViewChecked
- 执行顺序：每次组件视图（包括子视图）检查完成后执行，在ngAfterViewInit之后，频率较高。
- 作用：用于在每次视图检查后执行一些操作，例如检测视图的变化并执行相应逻辑。
- ngOnDestroy
- 执行顺序：在组件被销毁之前执行。
- 作用：用于执行清理操作，如取消订阅Observable以避免内存泄漏，解绑事件监听器等。
2. 与Angular变更检测机制的关系
- Angular的变更检测机制默认是基于脏检查的方式运行的。当某个事件（如用户交互、Promise或Observable的回调等）触发时，Angular会从根组件开始检查所有组件树中的数据绑定。
- 生命周期钩子函数与变更检测机制紧密相关。例如，ngOnChanges是在输入属性变化触发变更检测时执行；ngDoCheck允许开发者自定义变更检测逻辑；而ngAfterViewChecked和ngAfterContentChecked是在变更检测完成视图或内容检查后执行。
3. 变更检测不生效的原因及解决方法
- 原因
- 不可变数据问题：如果数据是通过引用修改而不是创建新的对象或数组，Angular的默认变更检测可能无法检测到变化。例如直接修改数组中的元素而不是重新赋值整个数组。
- 异步操作：当在异步操作（如setTimeout、Promise、Observable）中更新数据时，由于变更检测不会自动触发，可能导致视图不更新。
- 变更检测策略：组件设置了OnPush变更检测策略，当输入属性没有变化且没有从Observable中接收到新值时，变更检测不会运行。
- 解决方法
- 使用不可变数据模式：在更新数据时创建新的对象或数组，例如使用数组的map、filter、concat等方法返回新数组，或者使用Object.assign() 或展开运算符创建新对象。
- 手动触发变更检测：对于异步操作，可以引入
ChangeDetectorRef 并调用 detectChanges() 方法手动触发变更检测。例如：
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
export class ExampleComponent {
constructor(private cdRef: ChangeDetectorRef) {}
ngOnInit() {
setTimeout(() => {
// 更新数据
this.data = 'new value';
this.cdRef.detectChanges();
}, 1000);
}
}
- **处理OnPush策略**：如果组件使用了OnPush变更检测策略，确保输入属性是不可变的，并且在Observable有新值时，视图会正确更新。或者在需要时手动标记组件为脏，从而触发变更检测。
