[解決済み] ionInputとionChangeで有意差あり
質問
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>
解決方法は?
その答えは
どのコンポーネントを使用しているかに依存します。
.
最初
とは何か、知る必要があります。
ionInput
と
ionChange
. それは
イベントエミッター
で、各コンポーネントの内部で定義されています。そのため、2つのコンポーネントの間で異なる値になります。
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
は、textboxの値が変更されるたびに発行されます。
以下は
ライブの例
関連
-
[解決済み] Angular 2のコンポーネントプロパティにデフォルト値を設定する方法は?
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] ERROR エラーです。StaticInjectorError(AppModule)[UserformService -> HttpClient]です。
-
[解決済み] エラーです。参照または変数に代入できません! Angular 4 [重複]の場合
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] NgModuleにおける宣言、プロバイダ、インポートの違いは何ですか?
-
[解決済み] "require(x)" と "import x" の違いについて
-
[解決済み] String型とstring型の違いは何ですか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angularで実際のエラーメッセージの代わりに「Http failure response for (unknown url): 0 Unknown Error」が表示されるのですが。
-
[解決済み】angularモジュールでModule has no exported memberエラー
-
[解決済み] updateValueAndValidityとは?
-
[解決済み] Uncaught (in promise): Ionic 2でcordova_not_available。
-
[解決済み] ZoneAwarePromiseとは
-
[解決済み] ReferenceError: localStorageが定義されていません。
-
[解決済み] "エラーです。オーバーレイのプロバイダがありません!"
-
[解決済み] モジュール "ionic-native" が見つかりません。
-
[解決済み] コンポーネントは2つのモジュールの宣言に含まれる
-
[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。