огонь ngOnChanges на компонентной модели собственности

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

Вы можете справиться с (нажатием) событием.

Краткое описание.

<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; 
} 

Answer 2

Это так, как и было предусмотрено. ngOnChanges не вызывается, когда свойство изменено, оно вызывается, когда изменяется связанное значение (связанное с [distanceA]="propFromParent"), которое приводит к изменению @Input() дочернего компонента.

Просто измените свойство геттерных/сеттер как

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