为何Angular 2的ngOnChanges钩子不会被调用？

嘿，我来帮你捋捋这个ngOnChanges不触发的问题～首先先把你贴的代码补全成完整可复现的版本：

import { Component, Input } from "@angular/core"
import { FormsModule } from '@angular/forms';
import { OnChanges, SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'my-app',
  template: `
    Enter text : <input type="text" [(ngModel)]='userText' />
    <br/>
    Entered text : {{userText}}
  `
})
export class AppComponent implements OnChanges {
  @Input() userText: string = '';

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges triggered', changes);
  }
}

问题根源 #

*ngOnChanges这个生命周期钩子的核心触发逻辑是：只有当父组件传递给子组件的@Input属性值发生变化时，才会被调用。而你现在的代码里，userText是通过组件内部的[(ngModel)]双向绑定直接修改的——这种内部状态的变更，Angular不会触发ngOnChanges，因为这个钩子专门监听的是「外部输入的变更」。

解决方案 #

根据你的需求，有几种不同的处理方式：

1. 监听所有userText的变更（内部/外部都算）：用属性setter替代ngOnChanges

如果你需要不管是父组件传入修改，还是内部输入框修改，都能监听到变化，可以给userText写一个setter：

import { Component, Input } from "@angular/core"
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    Enter text : <input type="text" [(ngModel)]='userText' />
    <br/>
    Entered text : {{userText}}
  `
})
export class AppComponent {
  private _userText: string = '';

  @Input()
  set userText(value: string) {
    this._userText = value;
    // 这里写你原本要在ngOnChanges里执行的逻辑
    console.log('userText 发生变化:', value);
  }

  get userText(): string {
    return this._userText;
  }
}

2. 如果你原本就需要父组件传入userText

如果你的初衷是让父组件给这个组件传递userText，那现在的问题是你没有在父组件中传入这个属性。比如在父组件的模板里这样使用：

<my-app [userText]="parentComponentText"></my-app>

当父组件的parentComponentText值变化时，子组件的ngOnChanges就会正常触发了。

3. 仅监听输入框的用户输入变更：用ngModelChange事件

如果你只需要监听输入框的用户输入操作带来的变化，可以直接在模板里绑定ngModelChange事件：

Enter text : <input type="text" [ngModel]='userText' (ngModelChange)="handleTextChange($event)" />

然后在组件类中添加处理方法：

handleTextChange(newValue: string) {
  this.userText = newValue;
  console.log('输入框内容变化:', newValue);
  // 执行你的业务逻辑
}

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