Как проверить обработчик Angular2 (input), если значение действительно изменено.

Question

Я хочу запустить некоторый код в компоненте Angular2, если изменилось поле ввода ngModel. Я хочу прослушать событие (input), потому что он запущен на любом типе взаимодействия с пользователем. Это означает, что я не могу использовать событие (change) здесь. Я хочу запустить свой код только в том случае, если значение изменилось.

Вот пример компонента:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'myCuteComponent', 
    templateUrl: ` 
     <h1>yoO World</h1> 
     <input [(ngModel)]="cuteValue" (input)="onInput($event)"> 
    ` 
}) 
export class MyCuteComponent { 

    cuteValue = ''; 

    constructor() { } 

    onInput(event) { 
     if (event.target.value !== this.cuteValue) { 
      console.log('value has changed'); // this will never run :(
     } 
    } 
} 

Проблема заключается в том, что event.target.value содержит новое значение уже при onInput обжигают. Таким образом, этот способ не будет работать, console.log will никогда не запускается.

Вопрос: Есть ли правильное (и общее) решение для определения того, действительно ли значение действительно изменилось после любого типа взаимодействия с пользователем?

Answer 1

Попробуйте это:

import { Component} from '@angular/core'; 

@Component({ 
    selector: 'myCuteComponent', 
    templateUrl: ` 
     <h1>yoO World</h1> 
     <input [(ngModel)]="cuteValue" (ngModelChange)="onInput($event)"> 
    ` }) export class MyCuteComponent { 

    onInput(value) { 
     console.log(value); 
    } 
} 

ControlValueAccessors записает начальное значение с квадратными скобками, и испускает значение изменения с банановыми скобками. Таким образом, [ngModel] и (ngModelChange) сокращаются до [(ngModel)], чтобы связывать и испускать изменения.

Answer 2

Вы пытались использовать OnChanges (https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html)?

Что-то вроде:

import { Component, OnChanges } from '@angular/core'; 

@Component({ 
    selector: 'myCuteComponent', 
    templateUrl: ` 
     <h1>yoO World</h1> 
     <input [(ngModel)]="cuteValue" (input)="onInput($event)"> 
    ` 
}) 
export class MyCuteComponent implements OnChanges { 

    ngOnChanges(changes: SimpleChanges) { 
     // changes.prop contains the old and the new value... 
    } 
}