Ionic 3 lets you scroll back for one page

Question

I disabled 'swipe back' globally, both in the root component and in the module configuration

<ion-nav #appNav [root]="rootPage" swipeBackEnabled="false"></ion-nav> ... IonicModule.forRoot(MobileApplication, {swipeBackEnabled: false}), ... 

I need to enable it for only one page. Therefore, we try to set it by passing the nav instance to the 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 register these values ​​when scrolling correctly, it registers all the values ​​as true. However, nothing happens, does the napkin look backwards not working? Did I miss something?

For reference, I am using Ionic 3.9.2 and @ ionic / app-scripts 3.1.4. thanks in advance

Answer 1

I'm not quite sure what the trick is 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 still don’t quite understand why installing swipeBackEnabled in other lifecycle interceptors did not do this, so I will continue the investigation later. This may be the starting point for those who may run into the same issue.

Answer 2

To do this, create an identifier for your ionic menu, for example, I gave the main menu. to access it in your part of the controller.

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 below code inside your constructor

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

therefore, the above code acts like disabling side-menu scrolling to open functionality through the entire application.

will say that you want to enable swipe to open the side menu on only one page, so add the code below

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

this will allow scrolling to open the side menu functionality.

Note: After using swipeEnable (true, 'main-menu'); This will allow access to the entire application. Inorder for its resolution is used only on one page of the page on which the page was redone, and is disconnected from the previous page and the next page related to the current page.

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

UPDATE:

Another way to achieve this is to enable and disable it on the same page.

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

and disable it on the same page using ionviewdidleave

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

Thus, the above code will use both methods to enable and disable the side menu