如何在離子2中正確使用（點擊）？

Question

這是我第一次嘗試使用離子2，但已經有困難了。但我在努力。 因此，在我開始一個新項目後，我繼續查看如何使用click事件。我在網上搜索和閱讀。但仍然沒有得到正確的答案。

所以我用這個代碼按鈕點擊事件。

<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部分。

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元素中的代碼是完美的。問題是你已經在類的構造函數中聲明瞭openfilters()方法，所以click事件處理程序找不到它。

將它放在構造函數之外，作爲該類的另一個方法，它將按預期工作。

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'); 
    } 
} 

把構造函數之外的openFilters（）。