2017-12-04 12 views
5

tôi đã vô hiệu hóa 'swipe trở lại' trên toàn cầu, cả về thành phần gốc và mô-đun cấu hìnhIonic 3 cho phép swipe lại cho một trang duy nhất

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav> 

... 
IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}), 
... 

Tôi cần mặc dù để kích hoạt nó cho chỉ một trang. Vì vậy, tôi đang cố gắng thiết lập nó bằng cách chuyển một cá thể nav tới constructor và sau đó thiết lập swipeBackEnabled thành true.

ionViewWillEnter() { 
    this.nav.swipeBackEnabled = true; 
    console.log('swipeBackEnabled ' + this.nav.swipeBackEnabled); 
    console.log('canGoBack ' + this.nav.canGoBack()); 
    console.log('canSwipeBack ' + this.nav.canSwipeBack()); 
} 

Ghi nhật ký vuốtQuay lại và có thểQuay trở lại đúng, nhưng có thểSwipeQuay trả về sai. Nếu tôi thêm một sự kiện swipe ở đâu đó trong mẫu của tôi và đăng nhập các giá trị đó trên swipe phải, nó sẽ ghi lại tất cả các giá trị là true. Tuy nhiên, không có gì xảy ra, có vẻ như vuốt lại không hoạt động? Tui bỏ lỡ điều gì vậy?

Để tham khảo, tôi đang sử dụng Ionic 3.9.2 và @ ionic/app-scripts 3.1.4. Cảm ơn trước

+0

'this.nav' của bạn là gì? – Duannx

+0

@duannx đó là một trường hợp của một nav ionic 'import {Nav} từ" ionic-angular ";' – vitalym

+1

Chỉ cần thay đổi nó thành 'navCtrl' được chèn vào' constructor' – Duannx

Trả lời

0

Tôi không hoàn toàn chắc chắn những gì đã làm các trick ở đây, nhưng các thiết lập sau đây đã làm cho nó làm việc cho tôi:

public ionViewWillEnter(): void { 
    this.appNav.swipeBackEnabled = true; 
} 

public ionViewWillUnload(): void { 
    this.appNav.swipeBackEnabled = false; 
} 

appNav đây là một Ví dụ của ionic NavController.Tôi chưa hiểu đầy đủ lý do tại sao thiết lập swipeBackEnabled trong móc vòng đời khác đã không làm cho nó, vì vậy tôi sẽ tiếp tục điều tra sau này. Đây có thể là điểm khởi đầu cho một người có thể gặp phải vấn đề tương tự.

0

để thực hiện việc này tạo id cho menu ion của bạn như tôi đã cung cấp menu chính. để truy cập nó trong phần điều khiển của bạn.

app.html

<ion-menu [content]="appNav" id="main-menu"> 
.... 
.... 
</ion-menu> 
<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav> 

bên app.component.ts bạn nộp vị trí mã bên dưới bên trong constructor của bạn

menuCtrl.swipeEnable(false, 'main-menu'); 

nên mã trên hoạt động như vô hiệu hóa swipe menu bên phải mở chức năng thông qua toàn bộ ứng dụng.

phép nói rằng bạn muốn bật quẹt để mở menu bên trong chỉ có một trang để thêm vào mã bên dưới

this.menuCtrl.swipeEnable(true, 'main-menu'); 

này sẽ cho phép các swipe để mở các chức năng menu bên.

Lưu ý: Khi bạn đã sử dụng swipeEnable (đúng, 'menu chính'); điều này sẽ có thể truy cập vào toàn bộ ứng dụng. Inorder để giải quyết nó chỉ sử dụng trong một trang trang được trả lời và vô hiệu hóa là trang trước và trang tiếp theo được tôn trọng cho trang hiện tại.

chỉ kích hoạt nó trên trang hiện tại và vô hiệu hóa nó trên trang mặt trước và sau của trang hiện tại

UPDATE:

một cách khác để đạt được điều này được kích hoạt và vô hiệu hóa nó ở cùng một trang.

ionViewDidEnter(){ 
    this.menuCtrl.swipeEnable(true, 'main-menu'); 
} 

và vô hiệu hóa nó trên cùng một trang bằng cách sử dụng ionviewdidleave

ionViewDidLeave(){ 
    this.menuCtrl.swipeEnable(false, 'main-menu'); 
} 

Vì vậy, các mã trên sẽ thực hiện cả hai phương pháp cho phép và vô hiệu hóa các bên menu

Các vấn đề liên quan