angular - 在 Angular 4 中，钩子(Hook) ngOnChanges 没有在输入时触发

Question

我是 Angular2/4 的新手。我创建了一个带有输入字段的基本组件。用户输入将反射(reflect)在绑定(bind)到用户输入的其他组件中。现在我想设置一个通用的监听器来监听值的变化。

我认为 OnChanges Hook 是完美的解决方案，但从未调用过 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 不会在每次组件属性内部更改时调用。当来自父组件的数据绑定(bind)将新值推送到子组件时调用它。所以如果你的父组件有

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

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

拍一个look at the docs :

ngOnChanges

Respond when Angular (re)sets data-bound input properties...Called before ngOnInit() and whenever one or more data-bound input properties change.

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

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