1. ホーム
  2. angular

[解決済み] ionInputとionChangeで有意差あり

2022-02-14 17:03:38

質問

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>

解決方法は?

その答えは どのコンポーネントを使用しているかに依存します。 .
最初 とは何か、知る必要があります。 ionInputionChange . それは イベントエミッター で、各コンポーネントの内部で定義されています。そのため、2つのコンポーネントの間で異なる値になります。 ion-tabs があります。 ionChange は、選択されたタブが変更されるたびに発行されます。 ion-input があります。 ionChange のように、入力の値が変化するたびに発行されます。つまり、これらは全く別のものなのです。
セカンド は、すべてのコンポーネントが ionInput . と同じように ionChange . ion-input だけが ionInput . しかし ion-searchbar は両方持っています。
最後に その違いを見極めてください beetwen ionInputionChangeion-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 は、textboxの値が変更されるたびに発行されます。
以下は ライブの例