在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

快来看看文档:

ngOnChanges

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

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

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

Answer 2

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

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

要么

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