在 Angular 4 中，钩子 ngOnChanges 不会在输入时触发

Question

我对 Angular2/4 还是很陌生。我创建了一个带有输入字段的基本组件。用户输入将反映在绑定到用户输入的其他组件中。现在我想为值更改设置一个通用侦听器。

我认为 OnChanges 挂钩将是完美的解决方案，但从未调用过 ngOnChanges 方法。我做错了吗？

任何提示表示赞赏...

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

@Component({
  selector: 'my-app',
  template: `
    <input [(ngModel)]="name">
    <input [(ngModel)]="name">
    <h1>{{name}}</h1>
  `,
})
export class AppComponent implements OnChanges {

  @Input() name: String = "abc"

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
    console.log('on change', changes)
  }    

}

Answer 1

ngOnChanges 不会在每次组件属性内部更改时调用。当父组件的数据绑定将新值推送到子组件时，它会被调用。所以如果你的父组件有

<child-comp [name]="parentValue"></child-comp>

当parentValue 发生变化时，子组件的@Input() name 会发生变化并触发ngOnChanges

参加look at the docs:

ngOnChanges

在 Angular（重新）设置数据绑定输入属性时响应...在 ngOnInit() 之前以及一个或多个数据绑定输入属性更改时调用。

要在您的表单输入更改时收到通知，从长远来看，最好的方法是学习Reactive Forms，因为它们使您可以在组件中创建FormControl 对象并公开一个非常简单的可观察对象，每次表单都会发出值变化。

如果您希望坚持使用模板驱动的表单，您可以绑定到输入的 keypress 或 keyup 事件以触发您想要在更改时运行的任何逻辑。

Answer 2

你为什么使用 ngOnChanges 你可以简单地使用

 <input [(ngModel)]="name" (input)="valuechange($event)"> 

或

<input [ngModel]="name" (keypress)="valuechange($event)">