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

试试这个：

import itertools

def bits_on(n, k):
    for which_on in itertools.combinations(range(n), k):
        out = [0]*n
        for index in which_on:
            out[index] = 1
        yield tuple(out)

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

如果值确实已更改，如何检入Angular2（输入）处理程序

2 个答案: