11

这是我第一次尝试使用 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 部分。

4

5 回答 5

25

使用点击功能

你的代码应该是这样的

.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');
    }
}
于 2016-08-13T05:17:44.270 回答
7

button元素中的代码是完美的。问题是您已经在类的构造函数中openfilters()声明了该方法，因此单击事件处理程序找不到它。

把它放在构造函数之外，作为类的另一个方法，它会按预期工作。

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

  openFilters() {
    console.log('crap');
  }
}
于 2016-08-13T12:17:41.793 回答
2

点击事件会在 iOS 设备上造成延迟问题。用户可能必须多次单击元素才能使 ionic 识别事件。据说这个问题的原因是 Ionic 点击拦截器，它会阻止任何交互，直到完全完成转换。这是为了识别用户是否想要触摸设备上的单击事件或双击事件。

请参考解决方案 -

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

于 2017-06-01T06:27:15.707 回答
0

您从模板调用的函数应该是 HomePage 类的方法。

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

    openFilters() {
        console.log('crap')
    }
}
于 2016-08-13T04:18:33.843 回答
0 
@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {}

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

将 openFilters() 放在构造函数之外。

于 2017-09-11T13:31:34.087 回答