首页 文章

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

提问于
浏览 次
20

我是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)
  }    

}
angular

2 回答

  • 32

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

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

    当 parentValue 更改时，子组件的 @Input() name 将更改，这将触发 ngOnChanges

    拿一个look at the docs：

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

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

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

    回复于
  • 8

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

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

    要么

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

相关问题