javascript - 如何检查 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 :(
        }
    }
}

问题在于，当 onInput 被触发时，event.target.value 已经包含新值。所以这种方式行不通，console.log 将永远不会运行。

问题:是否有适当的(且通用的)解决方案来检测在任何类型的用户交互后值是否确实发生了变化？

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