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

Posted 2023-03-13

【中文标题】在 Angular 4 中，钩子 ngOnChanges 不会在输入时触发

【英文标题】：In Angular 4 the hook ngOnChanges is not firing on input

【发布时间】：2017-11-29 19:54:38

【问题描述】：

我对 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)
      

【问题讨论】：

ngOnChanges：当您将使用 @Input() 将值从一个组件传递到另一个组件时调用。生命周期挂钩：thetechieshouse.com/wp-content/uploads/2017/10/…

【参考方案1】：

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

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

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

参加look at the docs:

ngOnChanges

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

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

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

【讨论】：

源代码显示了从github.com/angular/angular/blob/… 实际调用 ngOnChanges 的位置 - 您可以看到它与指令代码非常相关，因此如果您只是手动设置属性值，它就不起作用

【参考方案2】：

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

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

或

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