ngOnChanges 何时被调用？

推荐答案

ngOnChanges 是 Angular 生命周期钩子之一，当 Angular 检测到组件或指令的输入属性发生变化时，ngOnChanges 会被调用。具体来说，ngOnChanges 会在以下情况下被调用：

1. 输入属性的值发生变化：当父组件通过 @Input 绑定的属性值发生变化时，ngOnChanges 会被触发。
2. 组件初始化时：如果组件有输入属性，ngOnChanges 会在 ngOnInit 之前被调用，且传入的 SimpleChanges 对象会包含初始值。

本题详细解读

1. 输入属性变化时调用

ngOnChanges 主要用于响应输入属性的变化。当父组件通过 @Input 绑定的属性值发生变化时，Angular 会自动检测到这一变化，并调用 ngOnChanges 方法。此时，ngOnChanges 会接收一个 SimpleChanges 对象作为参数，该对象包含了当前值和前一个值的信息。

@Input() myInput: string;

ngOnChanges(changes: SimpleChanges) {
  if (changes.myInput) {
    console.log('myInput changed:', changes.myInput.currentValue);
  }
}

2. 组件初始化时调用

在组件初始化时，如果组件有输入属性，ngOnChanges 会在 ngOnInit 之前被调用。此时，SimpleChanges 对象会包含输入属性的初始值。这对于需要在组件初始化时处理输入属性的场景非常有用。

@Input() myInput: string;

ngOnChanges(changes: SimpleChanges) {
  if (changes.myInput && changes.myInput.isFirstChange()) {
    console.log('myInput initialized:', changes.myInput.currentValue);
  }
}

3. 注意事项

• ngOnChanges 只会在输入属性发生变化时被调用，如果输入属性是引用类型（如对象或数组），并且其内部属性发生变化，但引用本身未变，ngOnChanges 不会被触发。
• 如果组件没有输入属性，ngOnChanges 不会被调用。

通过理解 ngOnChanges 的调用时机，开发者可以更好地控制组件的响应行为，确保在输入属性变化时执行必要的逻辑。