ionInput和ionChange之间的显着差异

Question

问：(ionInput)和之间有什么区别(ionChange)？在哪种情况下，我应该选择其中一个？

我已经尝试了如下所示的两个代码，并且给出了与预期相同的结果。

---

使用ionInput事件的示例代码

<ion-searchbar type="text" maxlength="18" placeholder="Search" debounce="0" 
 [(ngModel)]="usernameText" (ionInput)="findUserWithUsername()"></ion-searchbar> 

使用ionChange事件的示例代码

<ion-input type="text" maxlength="18" placeholder="Search" clearInput
 [(ngModel)]="usernameText" (ionChange)="findUserWithUsername()"></ion-input>

Answer 1

答案是：这取决于您使用的组件。

首先，您需要知道什么是ionInput和ionChange。它是EventEmitter，在每个组件中定义。因此，两个组件之间将有所不同。ion-tabs具有ionChange每当所选择的标签改变其将发射。ion-input具有ionChange每当输入的值而改变，这将发射。所以这些完全不同。

其次，并非所有组件都有ionInput。与相同 ionChange。ion-input只是有ionInput。但是ion-searchbar两者都有。

最后，只是找出beetwen的差异ionInput和ionChange的ion-searchbar。让我们创建一个小测试：
在home.html：

<ion-searchbar placeholder="Search" debounce="0" (ngModel)]="searchText" (ionChange)="ionChange()" (ionInput)="ionInput()"></ion-searchbar>

在home.ts：

searchText = "111";
ionViewDidLoad(){
   //Change the searck value after 2s the page loaded  
   setTimeout(()=>{ 
      console.log("change from the code");
      this.searchText = "222";
   },2000)
}  

当用户在文本框中键入内容时，两个事件都会触发。但是当searchText通过代码更改的值时，只会ionChange触发。因此，我们可以得出结论，在 ion-searchbar组件ionInput事件中，只要用户在文本框中键入内容就会触发，而在文本框ionChange的值更改时就会触发。

这是现场示例