ionInput 和 ionChange 之间的显著差异

Question

Q.(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。它是事件发射器，在每个组件中都找不到它。因此，两个组件之间会有所不同。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-searchbarionInput每当用户在文本框中键入时都会触发事件，ionChange每当文本框的值更改时都会触发。

这是现场示例

Answer 2

我已经尝试过(ionInput)但没有在其中触发任何事件. 然后我尝试了(input)然后它对我有用。 因此，请确保您是正确的，否则我可能会在某个时候失踪。

现在(input)和(ionChange)之间的区别

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

希望这些信息对您有所帮助。

Answer 3

另一个显著区别是使用debounce属性时。debounce只影响ionChange，而不影响ionInput。这在您希望在触发ionChange事件之前执行某些操作的特定情况下会很方便。

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