Angular ngOnChanges检测不到输入值的变化

在Angular中，父组件可以向子组件传递数据，而子组件可以通过ngOnChanges生命周期钩子函数来监听输入值的改变。然而，在某些情况下，ngOnChanges检测不到输入值的变化。本文将探讨这种情况的常见原因和解决方法。

场景

假设有一个父组件和一个子组件，父组件向子组件传递了一个数组和一个字符串。

// ParentComponent.html
<child-component [arr]="arr" [str]="str"></child-component>

// ChildComponent.ts
@Component({
  selector: 'child-component',
  template: `
    <p>{{ arr }}</p>
    <p>{{ str }}</p>
  `,
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
})
export class ChildComponent {
  @Input() arr: string[];
  @Input() str: string;
}

当父组件的数组或字符串发生改变时，子组件的ngOnChanges应该会被触发，并且在控制台中输出改变的值。

问题

然而，在某些情况下，ngOnChanges检测不到输入值的变化。例如，如果父组件的数组或字符串使用的是同一个引用，即使它们的值发生了改变，ngOnChanges也不会被触发。

// ParentComponent.ts
export class ParentComponent {
  arr = [1, 2, 3];
  str = 'hello';
}

// ChildComponent.ts
@Component({
  selector: 'child-component',
  template: `
    <p>{{ arr }}</p>
    <p>{{ str }}</p>
  `,
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
})
export class ChildComponent {
  @Input() arr: string[];
  @Input() str: string;
}

在这种情况下，当父组件调用this.arr.push(4);或this.str = 'world';时，ngOnChanges不会被触发，因为数组和字符串的引用没有改变。

解决方法

为了解决这个问题，可以在父组件中使用新的引用来更新数组或字符串。

// ParentComponent.ts
export class ParentComponent {
  arr = [1, 2, 3];
  str = 'hello';

  updateArray() {
    this.arr = [...this.arr, 4];
  }

  updateString() {
    this.str = 'world';
  }
}

// ChildComponent.ts
@Component({
  selector: 'child-component',
  template: `
    <p>{{ arr }}</p>
    <p>{{ str }}</p>
  `,
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
})
export class ChildComponent {
  @Input() arr: string[];
  @Input() str: string;
}

现在，当父组件调用this.updateArray()或this.updateString()时，ngOnChanges会被触发，因为数组和字符串的引用已经改变了。

总结

在Angular中，ngOnChanges生命周期钩子函数可以用来监听输入值的改变。然而，在某些情况下，ngOnChanges检测不到输入值的变化。这可能是因为父组件的数组或字符串使用的是同一个引用，即使它们的值发生了改变，ngOnChanges也不会被触发。为了解决这个问题，可以在父组件中使用新的引用来更新数组或字符串。