如果值真的改变了，如何检查 Angular2（输入）处理程序

Question

如果输入字段的 ngModel 已更改，我想运行 Angular2 组件中的一些代码。我想监听 (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

您是否尝试过使用 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...
    }
}

Answer 2

试试这个：

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)] 来绑定和发出变化。

如果值真的改变了，如何检查 Angular2（输入）处理程序

How to check in the Angular2 (input) handler if the value is really changed

javascript

event-binding

angular-ngmodel

angular