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

Question

Это моя первая попытка использовать ионную 2. Но у меня уже возникли трудности. Но я пытаюсь. Итак, после того, как я начал новый проект, я продолжил рассмотрение того, как используется событие click. Я ищу и просматриваю сеть. Но ответа не получил.

Таким образом, я использовал этот код при событии нажатия кнопки.

<button myitem (click)='openFilters()'>CLICK</button> 

И мой файл .tts выглядит так, как показано ниже.

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()внутри конструктора класса, поэтому обработчик события щелчка не смог его найти.

Поместите его за пределы конструктора, как еще один метод класса, и он будет работать, как ожидалось.

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

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

Answer 4

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

Пожалуйста, обратитесь к раствору при -

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() наружный конструктор.