我正在尝试通过实验学习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;
}
有人可以提供解释吗?我在这里做错了什么?
答案 0 :(得分:0)
我想你可能会误解@Input字段的意图。 @Input字段允许在父组件和子组件之间进行通信,组件中的databindung不需要它们。 databindung不需要属性,这些字段必须是公共的。 作为生命周期钩子ngOnChanges旨在对@Input字段的更改做出反应,而不是对html输入元素做出反应。
如果您想要比双向数据绑定更精细的更改行为,请尝试
<input type="text" [(ngModel)]='userText' (ngModelChange)="onUserTextChange($event)">
(很抱歉,如果上面的代码没有开箱即用,我会在我回到开发者机器后立即测试并清理它)
您可以查看更多信息here。