为什么ngOnChanges钩子不会被叫?

时间:2018-04-08 08:48:42

标签: angular typescript angular-components

我正在尝试通过实验学习Angular 2,并且我发现ngOnChanges在以下代码中没有触发:

app.component.ts:

import { Component, Input } from "@angular/core"
import { FormsModule } from '@angular/forms';
import { OnChanges, SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
  selector: 'my-app',
  template: `
    Enter text : <input type="text" [(ngModel)]='userText'  />
    <br/>
    Entered text :  {{userText}} 
  `
})

export class AppComponent {
  @Input()  userText: string;
  name: string = "Tom";

  ngOnChanges(changes: SimpleChanges): void {
    for (let propertyName in changes) {
      let change = changes[propertyName];
      let current = JSON.stringify(change.currentValue);
      let previouis = JSON.stringify(change.previousValue);
      console.log(propertyName + ' ' + current + ' ' + previouis);
    }

  }
}

以上代码未触发 ngOnChanges

但是,如果我创建一个单独的组件&#34;简单&#34;并在app.scomponent.ts中使用它,以下工作:

app.component.ts:

import {Component} from "@angular/core"
import {FormsModule} from '@angular/forms'; 
@Component({
  selector: 'my-app',
  template: `
    Enter text : <input type="text" [(ngModel)]='userText' />
    <br/>
    <simple [simpleInput]='userText'></simple>
  `
})

export class AppComponent{
  userText:string;
  name:string ="Tom";


}

simple.component.ts:

import {Component,Input} from '@angular/core';
import { OnChanges,SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
    selector:'simple',
    template: `You entered {{simpleInput}} `
})
export class SimpleComponent implements OnChanges{
    ngOnChanges(changes: SimpleChanges): void {
        for(let propertyName in changes){
            let change=changes[propertyName];
            let current=JSON.stringify(change.currentValue);
            let previouis=JSON.stringify(change.previousValue);
            console.log(propertyName+ ' '+current+ ' ' +previouis);
        }

    }
    @Input() simpleInput: string;

}

有人可以提供解释吗?我在这里做错了什么?

1 个答案:

答案 0 :(得分:0)

我想你可能会误解@Input字段的意图。 @Input字段允许在父组件和子组件之间进行通信,组件中的databindung不需要它们。 databindung不需要属性,这些字段必须是公共的。 作为生命周期钩子ngOnChanges旨在对@Input字段的更改做出反应,而不是对html输入元素做出反应。

如果您想要比双向数据绑定更精细的更改行为,请尝试

<input type="text" [(ngModel)]='userText' (ngModelChange)="onUserTextChange($event)">

(很抱歉,如果上面的代码没有开箱即用,我会在我回到开发者机器后立即测试并清理它)

您可以查看更多信息here