如何在离子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（）。