web-dev-qa-db-ja.com

ionic 2？で適切に使用（クリック）する方法は？

これは、ionic 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',を@component部分に追加しようとしました。

angulartypescriptionic2ionic3
11
yudhie.z.kurniawan

クリック機能を使用するには

コードは次のようになります

。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');
    }
}
25
Mohan Gopi

button要素のコードは完璧です。問題は、openfilters()メソッドを宣言したことですクラスのコンストラクター内であるため、クリックイベントハンドラーはそれを見つけることができませんでした。

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

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

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

クリックイベントは、iOSデバイスで遅延の問題を引き起こします。ユーザーは、イベントを識別するためにionicの要素を複数回クリックする必要がある場合があります。この問題の理由は、Ionicクリックブロッカー、これは、ユーザーがタッチデバイスでクリックイベントまたはダブルクリックイベントを望んでいるかどうかを認識するためです。

解決策を参照してください-

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

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

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

openFilters（）をコンストラクタの外に置きます。

0
Momin Iqbal

テンプレートから呼び出す関数は、HomePageクラスのメソッドであると想定されています。

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

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