Question

在我的模板上，我有这行代码：

<input name="distanceA" id="distanceA" type="number" [(ngModel)]="distanceA"/> {{distanceA}} meter

在它的component.ts文件中我有这个：

distanceA: number;

进一步说明：

ngOnChanges(changes: any) {
    if (changes["distanceA"] ) {
       alert(changes["distanceA"].currentValue);
    }
    if (changes["distanceB"] ) {
       alert(changes["distanceB"].currentValue);
    }
}

然而，在输入框中输入时，ngOnChanges事件不会触发。这是什么原因？我怎样才能做到这一点？绑定本身就像我在输入框中输入的内容一样，显示在页面上{{distanceA}}

Answer 1

这就是设计的。修改属性时不调用ngOnChanges，当更改绑定值（绑定[distanceA]="propFromParent"）导致子组件的@Input()发生更改时，将调用{<1}}。 p>

只需将您的属性更改为像

一样的getter / setter

_distanceA: number;
get distanceA() { return this._distanceA; }
set distanceA(val:number) { 
  this._distanceA = val; 
  alert(val);
}

Answer 2

您可以使用（按键）事件处理它。

简短的例子。

<input placeholder="0-99999" minlength="1" maxlength="5" name="areaCode" [(ngModel)]="number" (keypress)="validateNumber($event)" required>

validateNumber(event): boolean {
    return event.charCode >= 48 && event.charCode <= 57;
}

在组件模型属性上触发ngOnChanges

2 个答案: