javascript - 如何在Angular2(输入)处理程序中检查值是否确实更改

如果输入字段的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永远不会运行。

问题：是否存在适当（通用）的解决方案来检测在任何类型的用户交互之后价值是否真的发生了变化？

最佳答案

尝试这个：

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）]以绑定并发出更改。

关于javascript - 如何在Angular2(输入)处理程序中检查值是否确实更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41030046/