Angular中ngOnChanges未触发：counter变更时message无法更新求助

Angular的ngOnChanges生命周期钩子仅在组件的@Input绑定属性被父组件修改时才会触发。你当前的counter是通过组件内部的increment()/decrement()方法直接修改的，属于组件内部状态变更，这种情况不会触发ngOnChanges，这就是message始终为空的核心原因。

即便你给counter添加了@Input装饰器，只要不是父组件传递的counter值发生变化，ngOnChanges依然不会被调用。

根据你的场景，推荐以下几种可行方案：

方案1：直接在修改counter的方法中更新message（最简洁） #

既然counter的变更都通过increment和decrement方法触发，直接在这两个方法里同步更新message即可：

export class CounterComponent{
  counter: number = 0;
  message: string = '';

  increment() {
    this.counter++;
    this.updateMessage();
  }

  decrement() {
    this.counter--;
    this.updateMessage();
  }

  private updateMessage() {
    this.message = this.counter % 2 === 0 ? 'Even' : 'Odd';
  }
}

方案2：使用Setter监听counter的变化 #

通过给counter设置getter和setter，在setter中自动更新message：

export class CounterComponent{
  private _counter: number = 0;
  message: string = '';

  get counter(): number {
    return this._counter;
  }

  set counter(value: number) {
    this._counter = value;
    this.message = this._counter % 2 === 0 ? 'Even' : 'Odd';
  }

  increment() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

方案3：使用ngDoCheck（不推荐，仅作补充） #

如果需要监听所有变更（包括内部状态），可以用ngDoCheck，但注意这个钩子触发频率极高，可能影响性能：

import { DoCheck } from '@angular/core';

export class CounterComponent implements DoCheck{
  counter: number = 0;
  message: string = '';
  private previousCounter: number = 0;

  ngDoCheck() {
    if (this.counter !== this.previousCounter) {
      this.previousCounter = this.counter;
      this.message = this.counter % 2 === 0 ? 'Even' : 'Odd';
    }
  }

  increment() {
    this.counter++;
  }

  decrement() {
    this.counter--;
  }
}

方案4：通过父组件传递counter（仅适用于父子组件通信场景） #

如果坚持要使用ngOnChanges，需要将counter设为@Input属性，由父组件控制其值的变更：

子组件代码 #

import { Input, OnChanges, SimpleChanges } from '@angular/core';

export class CounterComponent implements OnChanges{
  @Input() counter: number = 0;
  message: string = '';

  ngOnChanges(changes: SimpleChanges) {
    if (changes['counter']) {
      this.message = this.counter % 2 === 0 ? 'Even' : 'Odd';
    }
  }
}

父组件模板 #

<app-counter [counter]="parentCounter"></app-counter>
<button (click)="parentCounter++">Increment</button>
<button (click)="parentCounter--">Decrement</button>

父组件代码 #

export class ParentComponent {
  parentCounter: number = 0;
}

你的场景下，方案1或方案2是最优选择，既简洁又符合Angular的最佳实践，避免不必要的生命周期钩子触发。

内容的提问来源于stack exchange，提问作者theworld