イオン2で正しく使用（クリック）するには？

Question

これはイオン2を使用する私の最初の試みですが、すでに難しかったです。しかし、私は努力しています。 新しいプロジェクトを開始した後、クリックイベントがどのように使用されているかを確認しました。私はネットを検索して読んでいます。しかし、まだ適切な答えを得ていない。

私はボタンクリックイベントでこのコードを使用しました。

<button myitem (click)='openFilters()'>CLICK</button> 

私の.tsファイルは以下のようになります。

import {Component} from '@angular/core'; 
import {NavController} from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 
    constructor(private navCtrl: NavController) { 
    openFilters() { 
     console.log('crap'); 
    } 
    } 
} 

イベントは、@コンポーネントの部分にselector: 'myitem',を追加しようとしました。

Answer 1

テンプレートから呼び出す関数は、HomePageクラスのメソッドであると考えられます。クリック機能と連携する

export class HomePage { 
    constructor(private navCtrl: NavController) {} 

    openFilters() { 
     console.log('crap') 
    } 
} 

Answer 2

あなたのコードは、この

.htmlを

<button myitem (click)='openFilters();'>CLICK</button> 

.TS

import {Component} from '@angular/core'; 
import {NavController} from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 
    constructor(private navCtrl: NavController) { 

    } 

    openFilters() { 
     console.log('crap'); 
    } 
} 

のようになります。

Answer 3

button要素のコードは完璧です。問題は、メソッドをクラスのコンストラクタ内に宣言しているため、クリックイベントハンドラが見つかりませんでした。

クラスの別のメソッドとしてコンストラクタの外側に配置し、期待どおりに動作します。

export class HomePage { 
    constructor(private navCtrl: NavController) { 
    // ... 
    } 

    openFilters() { 
    console.log('crap'); 
    } 
} 

Answer 4

クリックイベントは、iOSデバイスで遅延の問題が発生します。ユーザは、イベントを識別するためにイオンについて複数回要素をクリックしなければならないかもしれない。 この問題の理由は、移行が完全に完了するまでの相互作用をブロックするイオンクリックブロッカーと言われています。これは、ユーザーがタッチデバイス上でクリックイベントまたはダブルクリックイベントを望むかどうかを認識するためです。ありがとう

http://www.agiliztech.com/2017/05/29/click-handler-reaction-delay-ionic-2/

-

で溶液を参照してください。

Answer 5

@Component({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 
    constructor(private navCtrl: NavController) {} 

openFilters() { 
     console.log('crap'); 
    } 
} 

コンストラクタの外側にputFilters（）を配置します。