Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 3 enable swipe back for a single page

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

like image 242
vitalym Avatar asked Dec 04 '17 15:12

vitalym


1 Answers

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.

like image 54
vitalym Avatar answered Oct 13 '22 23:10

vitalym