Как правильно использовать (щелчок) в ионном 2?

Это моя первая попытка использовать ионную 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');
    }
  }
}

Событие

I попыталось добавить selector: 'myitem', к части @component.

Ответ 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');
    }
}

Ответ 2

Код в элементе button идеален. Проблема в том, что вы объявили метод openfilters() внутри конструктора класса, поэтому обработчик события щелчка не смог его найти.

Поместите его вне конструктора, как другой метод класса, и он будет работать как ожидалось.

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

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

Ответ 3

События Click будут создавать проблемы с задержкой на устройствах iOS. Пользователь может щелкнуть элемент несколько раз для ионной идентификации события. Причина этой проблемы называется блокировщиком кликов Ionic, который блокирует любое взаимодействие до тех пор, пока переход не будет полностью выполнен. Это нужно узнать, хочет ли пользователь событие клика или событие двойного щелчка на сенсорных устройствах.

Пожалуйста, обратитесь к решению по адресу

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

Спасибо.

Ответ 4

Предполагается, что функция, вызываемая вами из шаблона, является методом класса HomePage.

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

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

Ответ 5

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

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

добавить открытый конструктор openFilters().