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

使用单击功能

你的代码应该是这样的

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 2

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

把它放在构造函数之外,作为类的另一种方法,它将按预期工作.

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

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

Answer 3

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

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

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