差异 b/w (input) 和 (ionChange) 事件 - ionic 3答案

【问题标题】：difference b/w (input) and (ionChange) event - ionic 3差异 b/w (input) 和 (ionChange) 事件 - ionic 3
【发布时间】：2017-12-13 12:22:13
【问题描述】：

我试图在 10 个字符后调用 Web 服务，但我注意到当我使用 (input)="onInput()" 时它调用了两次不知道为什么。

经过几次搜索后，我将其更改为ionChange="onInput()"，它工作正常。我的问题是：

1：这两个事件的黑白差异？
2：在ionic-3中使用event.stopPropagation()可以防止两次调用。

html:

<ion-input type="text" [(ngModel)]='time' 
   (ionChange)='onInput($event)'>
</ion-input>

home.ts

onInput() {
   ## call service
}

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

ionChange 是一个 Angular EventEmitter，Ionic 使用它来处理大多数自定义组件中的输入更改。它在BaseInput.ts 中定义，并由input.ts 扩展，

@Output() ionChange: EventEmitter<BaseInput<T>> = new EventEmitter<BaseInput<T>>(); 
//...
_fireIonChange() {
    if (this._init) {
      this._debouncer.debounce(() => {
        assert(NgZone.isInAngularZone(), 'IonChange: should be zoned');
        this.ionChange.emit(this._inputChangeEvent());
        this._initModel = true;
      });
    }
  }

input 只是 DOM input，可以与 Ionic 元素以及基本的 html 输入元素一起使用。

ionChange 与 input 事件相比，在它发出之前进行了许多检查，这可能会阻止它在值更改时多次触发。

在 ionic-3 中使用 event.stopPropagation() 可以防止两次调用。

是的，您可以传递任何参数，包括 html $event 并调用其函数。

【讨论】：