angular - 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 两者都有。

最后，找出ion-searchbar的ionInput和ionChange的区别。让我们创建一个小测试:
在 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 事件会在用户输入值时触发文本框已更改。

这是 live example