Ionic 3 enable swipe back for a single page

7
votes

I've disabled 'swipe back' globally, both in root component and module config

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

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

I need though to enable it for one page only. So'm trying to set it by passing a nav instance to constructor and then setting swipeBackEnabled to true.

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

Logging swipeBackEnabled and canGoBack returns true, but canSwipeBack returns false. If I add a swipe event somewhere in my template and log those values on right swipe, it logs all the values as true. However, nothing happens, seems like swipe back is not working? Am I missing something?

For reference, I'm using Ionic 3.9.2 and @ionic/app-scripts 3.1.4. Thanks in advance

2
angularionic-frameworkionic2
What is your this.nav? – Duannx
@duannx it's an instance of a ionic nav import {Nav} from "ionic-angular"; – vitalym
Just change it to navCtrl which injected in constructor – Duannx
@Duannx sad to say it didn't change anything. I thought Nav is just a mapping for NavController? Anyways, what's bothering me is that canSwipeBack returns false when view is loaded. – vitalym
I do not think your nav is mapped to NavController. I tested in my project and it worked well. Please reproduce your problem in stackblitz.com for easier debugging – Duannx

2 Answers

4
votes

I'm not completely sure what did the trick here, but the following setup made it work for me:

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

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

appNav here is an instance of ionic NavController. I don't yet fully understand why setting swipeBackEnabled in other lifecycle hooks didn't make it, so I'll continue investigating later on. This might be a starting point for someone who might encounter same issue though.

1
votes

to do this create an id for your ion-menu like i have given main-menu. to access it in your controller part.

app.html

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

inside your app.component.ts file place the below code inside your constructor

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

so the above code acts as disabling the side menu swipe to open functionality through entire app.

lets say you want to enable the swipe to open side menu in only one page so add the below code

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

this will enable the swipe to open the side menu functionality.

Note: Once you used the swipeEnable(true,'main-menu'); this will be able to access to the entire app. Inorder to resolve it use in only one the respeted page page and disable is to the previous page and next page respected to the current page.

only enable it on the current page and disable it on the front and back page of that current page

UPDATE:

another way to achive this is enable and disable it on the same page.

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

and disable it on the same page by using ionviewdidleave

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

So the above code will do the both method enabling and disabling the side-menu