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。但是ionInput同时具备这两种功能。

最后，只需找出ionChange的{{1}}和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。

这是live example

Answer 2

我尝试了(input)，但没有在其中发生任何事件。然后我尝试(input)然后它对我有效。因此，请确保您是正确的，否则我可能会在某些时候失踪。

(ionChange)＆amp; (input)

(ionChange)：当用户尝试在输入字段中输入值时会触发此事件，即使用户复制相同的值并将其粘贴到字段中，它也会触发。因为它不会输入哪个值。
{{1}}：仅当用户更改输入字段的值时才会触发此事件。如果用户复制并粘贴相同的值，它将不会被触发。但如果用户输入不同的值，则它将触发。因为它对输入字段的值很重要。

希望这些信息能为您提供帮助。

Answer 3

另一个显着的区别是您使用debounce属性。 debounce仅影响ionChange，但不影响ionInput。在特定情况下，当您想在触发ionChange事件之前执行某些操作时，这可能会很方便。

在debounce上使用[(ngModel)]时，最好感觉到ion-searchbar的效果，debounce的默认ionInput为250ms。当您使用ionChange时，该值将始终忽略在过去250毫秒内键入的字符，这意味着除非debounce属性设置为0，否则node scripts/build.js是理想的选择。

ionInput和ionChange之间存在显着差异

3 个答案: