Làm thế nào để sử dụng đúng cách (bấm) trong ionic 2?

Question

Đây là nỗ lực đầu tiên của tôi khi sử dụng ion 2. Nhưng tôi đã gặp khó khăn. Nhưng tôi đang cố gắng. Vì vậy, sau khi tôi bắt đầu một dự án mới, tôi tiếp tục xem sự kiện nhấp được sử dụng như thế nào. Tôi tìm kiếm và đọc qua mạng. Nhưng vẫn không có câu trả lời đúng.

Vì vậy, tôi đã sử dụng mã này trên sự kiện nhấp nút.

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

Và tệp .ts của tôi trông giống như dưới đây.

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'); 
    } 
    } 
} 

Sự kiện đã thử thêm selector: 'myitem', vào phần @component.

Answer 1

Hàm bạn đang gọi từ mẫu được cho là phương thức trên lớp HomePage.

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

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

Answer 2

Để làm việc với chức năng nhấp chuột

mã của bạn sẽ trông như thế

.html này

<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

Mã trong phần tử button là hoàn hảo. Vấn đề là bạn đã khai báo phương thức openfilters()bên trong hàm tạo của lớp, do đó trình xử lý sự kiện nhấp chuột không thể tìm thấy nó.

Đặt nó bên ngoài hàm tạo, như một phương thức khác của lớp và nó sẽ hoạt động như mong đợi.

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

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

Answer 4

Sự kiện nhấp sẽ gây ra sự cố chậm trễ trên thiết bị iOS. Người dùng có thể phải nhấp vào phần tử nhiều lần để xác định sự kiện. Lý do cho vấn đề này được gọi là trình chặn nhấp chuột Ionic, chặn bất kỳ tương tác nào cho đến khi quá trình chuyển đổi hoàn tất. Điều này là để nhận ra nếu người dùng muốn có sự kiện nhấp chuột hoặc sự kiện nhấp đúp trên thiết bị cảm ứng.

Vui lòng tham khảo các giải pháp tại -

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

Cảm ơn bạn.

Answer 5

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

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

đặt openFilters() bên ngoài hàm tạo.