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)">

在Angular 4中，钩子ngOnChanges没有在输入上触发

2 个答案:

ngOnChanges